@font-face: advantages and usage
@font-face is a CSS(2) rule which allows us to display a font on a website even if that font isn't installed on the visitors' computer. This rule helps designers to use a much bigger selection of fonts instead of only being able to use web safe fonts that users have preinstalled on their computers. The most popular web-safe fonts are Arial, Times (New Roman), Verdana, Helvetica and Trebuchet.
Advantages of @font-face
If you want to keep up with current design trends, you need titles, logos and texts with unique, interesting fonts.
There are tons of free and paid fonts but most of them aren't web-safe.
@font-face helps us saving time and bandwidth.
Important: the fonts you use on your website must have a web-font licence. Check the website where you downloaded the font or the documentation that comes with the font in the download-package. If you can't find any licence on the download website or if there isn't a documentation simply try to google it.
How to use @font-face
The basic structure of an @font-face rule is very simple. It's recommended to include the @font-face rules at the beginning of a stylesheet, so the fonts will be loaded first.
This is how you then use it for your elements
Make sure you add some fallback options as shown in the example above in case @font-face isn't supported.
Support and Solutions for best compatibility
Almost all common browsers support @font-face. Even Internet Explorer has supported @font-face for years. Over 90% of all browsers support it. This is enough for a save level of browser support.
There are different file types for fonts. We need the following ones to have the full support for about 90% of all browsers:
- Internet Explorer (all versions): EOT
- Safari (3.2+): TTF/OTF
- Chrome (all versions): SVG and newer versions also: TTF/OTF
- Opera (10+): TTF/OTF
- Firefox (3.5+): TTF/OTF and also .WOFF since 3.6
- IPhone: (3.1+): SVG
This is the cleanest, best solution for best compatibility. It is recommended on lots of websites:
The Question Mark at the end of the second webfont.eot is not a mistake. I has to do with a bug in IE6-IE8. These browsers don't support multiple formats in the SRC. The ? leads the older Internet Explorer versions into thinking the rest of the string (after the question mark) is just a query, so only the first file, the webfont.eot, will be loaded. More about this.
#svgFontName is the name of the font id which you will find in the SVG file. Also you should know that the SVG version is the least important part of this solution, as SVG is only needed for legacy IOS.
Weights and Styles for non-webfont-service users
If you don't use any webfont services and want different font styles, the cleanest way is to include every font-style-file with a separate @font-face rule. Examples:
CodeAndMore @font-face made simple tool
- @font-face generator
@Font-Face generator: Easily Generate Font Faces Online
Font Squirrel - @font-face-Kit-generator (always check your font-licences first!).