@font-face is a CSS rule which allows you to show a font on a Web page even if that font is not installed on the users’ computer. This means that designers and developers can begin moving away from Web-safe fonts that users have pre-installed on their computer such as Arial, Times New Roman, Verdana and Trebuchet.
Advantages of using @font-face
A lot of modern sites pull their font dynamically from the web. But there the problem starts. A font defined for the OS does not necessarily look nice in the browser. Some fonts contain default character sets whereas others contain all international character sets as well.
Current design trends demand that titles, logos and headings use non Web-safe fonts. This means that to use fonts which are not installed on the users computer we must use methods such as hiding the title, and replacing it with a background image of that title in the special font. There are other methods such as cufon (http://cufon.shoqolate.com/generate/). Using @font-face means we can “do away” with hiding titles and using numerous time-consuming images per title and instead have a single font file on the server. Saving time and bandwidth.
Important!
Fonts must have a Web-font licence! Check the Web site you are downloading or purchasing the font from, or the documentation that comes with the font.
@font-face file types
When it comes to formats here is my quick reference card:
- True Type fonts: for Opera 10+, FireFox 3.5+, Safari 3.1+, Chrome 4.0+
- EOT fonts: Internet Explorer 4+
- WOFF fonts: Firefox 3.6+, IE9+, Chrome 5+
- SVG fonts: iPhone and iPad
Using @font-face
It’s easy to use @font-face, you simply include a rule in your style sheet, and reference to the font files almost as you would an image. An example on how to embed a custom font called Segoe Pro Light would be:
@font-face {
font-family: 'SegoeProLight';
src: url('../fonts/SegoePro/EOT/SegoeProDisplay-Light.eot');
src: url('../fonts/SegoePro/EOT/SegoeProDisplay-Light.eot?#iefix') format('embedded-opentype'),
url('../fonts/SegoePro/TTF/SegoeProDisplay-Light.ttf') format('truetype'),
url('../fonts/SegoePro/WOFF/SegoeProDisplay-Light.woff') format('woff'),
url('../fonts/SegoePro/SVG/SegoeProDisplay-Light.svg#SegoeProDisplay-Light') format('svg');
font-weight: normal;
font-style: normal;
}Then, using this custom font on a paragraph:
p {
font-family: SegoeProLight, Helvetica, Arial, sans-serif;
}Adjust font-size
Some fonts come in different sizes relative to standard fonts. Arial at 12px may not have the same relative size of another font that you are using, and then it can be very handy to use “font-size-adjust” to force the font to be relative. This is especially handy for when font-face isn’t supported and the fall-back font has be used instead. When you have used a larger (or smaller) font size to compensate for the different sizing of the font then this can easily break Web pages. By matching the sizes you can have neat Web pages that have a fall-back that works;
p {
font-family: SegoeProLight, Helvetica, Arial, sans-serif;
font-size-adjust:0.74;
}More information here: http://www.w3.org/TR/css3-fonts/#relative-sizing-the-font-size-adjust-pro
In practice
A solid guide to get the most supported and effective @font-face implementation;
- Using the fonts ttf file, if possible, go to:
http://www.fontsquirrel.com/fontface/generator (assuming you have checked the licence) and tick all available “Alt Font Formats”, subset the glyph count as needed and download the kit - Put all font files into a folder called “fonts” which should reside within your “styles” or “css” folder on your server
- Add stylesheet.css from the downloaded kit to this “fonts” folder and rename it to “fonts.css”
- In the <head> of your html file, add the following BEFORE your main stylesheet:
Flash Of Unstyled Text (FOUT)
One of the downsides of @font-face is that you will most likely encounter a brief moment before the page has fully loaded where the default or fall-back font is loaded before the included font file. Although this does look ugly it is up to you as to whether you can live with this. You can minimise this by reducing your glyph count or only including the minimum amount of fonts. Of course this is also dependant on the users network connection. Paul Irish has a few words on the matter: http://paulirish.com/2009/fighting-the-font-face-fout/
Originally posted at http://blog.marnixdevrije.nl/fonts-done-the-correct-way/