Fonts with CSS @font-face Rule
The CSS @font-face rule allows web developers to use any font to display text on a webpage. By using the @font-face rule you’ll no longer be restricted to using the limited amount of fonts that are available on the users computer.
To get the @font-face rule to work correctly, you will need to use the correct syntax as indicated below.
@font-face {
font-family: 'CustomFont';
src: url('customfont.eot');
src: url('customfont.eot?#iefix') format('embedded-opentype'),
url('customfont.woff') format('woff'),
url('customfont.ttf') format('truetype'),
url('customfont.svg#CustomFont') format('svg');
}
body {
font-family: 'CustomFont', Helvetica, Arial, sans-serif;
}You may be wondering why we need to specify so many different font formats, short answer, browser compatibility.
Here are the formats for different web browsers:
- Internet Explorer – EOT
- Firefox (3.5+) – TTF / OTF / WOFF
- Chrome – SVG / TTF / OTF
- Opera – TTF / OTF
- Safari (3.2+) – TTF / OTF
If you are looking for free fonts to use with the @font-face rule, you can try DaFont, they have a large range of fonts that you can downloaded for free. You will then need to convert these fonts to different formats, one site you can try is everythingfonts.com.
I hope you have found this CSS Snippet useful, click here to find more CSS Snippets.
