Milton Bayer

@font-face tutorial brought to you by Milton Bayer

like this? Share it!

Share |

Implementing @font-face

@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

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.

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:

@font-face {
font-family: DeliciousRoman;
src: url(/Delicious-Roman.otf);
}

Then, if you want the font to appear in the H1, for example, use:

h1 {
font-family: DeliciousRoman, Helvetica, Arial, sans-serif;
}

The above example uses some fall-back options in case @font-face isn't supported.

@font-face support

Internet Explorer supports @font-face, and has done for years. Firefox 3.5 recently supported it and was the last of the major browsers to support it.

According to the latest statistics from NetMarketShare we can achieve a minimum of 92% support.

More info from: http://webfonts.info/wiki/index.php?title=%40font-face_browser_support and http://marketshare.hitslink.com/browser-market-share.aspx?qprid=2

This is a more than safe level of browser support in my opinion when you consider most if not all of Internet Explorer users are included, and most, if not all modern Web browsers. A lot of the remaining 8% may also be mobile users. the iPhone supports it, as will the iPad.

@font-face file types

We need the following file types in order to have the full 92+% support. (as per: http://www.evotech.net/blog/2010/01/font-face-browser-support-tutorial/ )

So, .eot + .ttf /.otf + svg + woff = best support possible.

Some @font-face examples

Not all brilliant examples mind you!

@font-face fonts, resources

Fontsquirrel have a Web site dedicated to @font-face fonts: http://www.fontsquirrel.com/ - these do need to be tested PRIOR to laying out on PSD, so that you do not promise something to the client which can not be delivered.

A great tool for testing the fonts is http://webfontspecimen.com/demo/.

Additionally there are paid-for fonts which have a specific Web-font licence available from http://www.fontspring.com/. http://typekit.com/ and http://kernest.com/ are also good resources, but offer a hosted service.

In practice

A solid guide to get the most supported and effective @font-face implementation;

  1. 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
  2. Put all font files into a folder called "fonts" which should reside within your "styles" or "css" folder on your server
  3. Add stylesheet.css from the downloaded kit to this "fonts" folder and rename it to "fonts.css"
  4. In the <head> of your html file, add the following BEFORE your main stylesheet:
<link rel="stylesheet" type="text/css" href="/styles/fonts/fonts.css" />

Quick guide

  1. Go to: http://www.fontsquirrel.com/ and choose a font
  2. Test the font out using http://webfontspecimen.com/demo/
  3. Download the @font-face kit http://www.fontsquirrel.com/fontface or generate a kit http://www.fontsquirrel.com/fontface/generator (preferred)
  4. Add it to your CSS and put the font files on the server.

Typography control

If you do not specify a specific font in the CSS to use for various font-weights and styles, then the Web browser will itself add bolding and emphasis, which will bring varied results.

The best way of having full font control is to specify in the CSS which font should be used when there is bolding, emphasis or any other style. It's easy to do, providing that the font you have chosen comes with the various weighting options such as bold, regular, italic and bold italic.

In your CSS, include your various font-files;

@font-face {
font-family: DeliciousRomanRegular;
src: url(/Delicious-Roman-R.otf);
}

@font-face {
font-family: DeliciousRomanBold;
src: url(/Delicious-Roman-B.otf);
}

@font-face {
font-family: DeliciousRomanItalic;
src: url(/Delicious-Roman-I.otf);
}

@font-face {
font-family: DeliciousRomanBoldItalic;
src: url(/Delicious-Roman-BI.otf);
}

Then, specify which weighting or style is to use which font;

p {
font-family: DeliciousRomanRegular, Helvetica, Arial, sans-serif;
}

h1, strong {
font-family: DeliciousRomanBold, Helvetica, Arial, sans-serif;
}

em, cite, blockquote {
font-family: DeliciousRomanItalic, Helvetica, Arial, sans-serif;
}

strong em {
font-family: DeliciousRomanBoldItalic, 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: DeliciousRomanRegular, Helvetica, Arial, sans-serif;
font-size-adjust:0.49;
}

More information here: http://www.w3.org/TR/css3-fonts/#relative-sizing-the-font-size-adjust-pro

Subset the fonts, reduce the glyph count and save bandwidth

Some font files may have all the glyphs included (all available characters, number, letters etc) and this can increase the file size dramatically.

Where possible, reduce the glyph count by streamlining your font file. There is a brilliant tool for this online at http://www.fontsquirrel.com/fontface/generator.

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/

Have fun ;o)

This guide was written by Tjobbe Andrews, front-end Web developer at Milton Bayer. If you have any suggestions, comments or recommendations you can get in touch via twitter: http://www.twitter.com/tjobbe

Milton Bayer

Milton Bayer are a full service creative agency from Northamptonshire in the UK. We specialise in digital and print design.