@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. This means that we need techniques which will allow us to show these non-web-safe fonts on all computers. Of course, you can replace your texts with images, which will look the same on all computers, but this possibility will extend the loading time of a page and isn't good for search engines, since they only see text and no images. There are other methods based on JavaScript, but they also worsen the loading time and only work when JavaScript is turned on in the browser. All in all, using @font-face helps us saving time and bandwidth.

Licences

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.

File Types

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

Cleanest Solution

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: