Get up and running with @font-face

Here’s a very quick introduction to using the CSS fonts module intended for web designers who have a good knowledge of CSS but haven’t as yet experimented with @font-face rules.

Internet Explorer 6 onwards and recent versions of all mainstream browsers support the CSS fonts module.

Preparing the font files and CSS

The quickest and most efficient way of preparing font files and getting appropriate CSS to use them that I’m aware of is the Font Squirrel @font-face Generator. Here are a few notes on using it and choosing from its options.

My currently preferred settings

Adding fonts

Clicking the Add Fonts button allows you to select the font(s) you wish to use. If you don’t already have a font that is legal to use via @font-face, have a read of Where to get web fonts.

Font formats

Different browsers have different font format-reading capabilities, so more than one format of font is required. Each browser will only have to download one format, so don’t worry about extra bandwidth being wasted.

Very briefly: TrueType is used by many, EOT is the only format Internet Explorer can use, and WOFF can be used by Firefox. I use TrueType, EOT and WOFF (OpenType).

Alternate Formats

@font-face rules are well supported, so Cufón shouldn’t be necessary.

Font Options

I’ve found Add Hinting to improve font rendering in Windows, so I keep this option selected.

File sizes of fonts have been quite small, so I don’t feel the need to Simplify Outlines. And the same goes for Remove Kerning.

However, reducing file sizes without loss of quality is always a good thing to do, and subsetting fonts can really make a difference, especially if the font you are using has an extensive range of glyphs. So tick Subset Font… and spend a little time narrowing down the included glyphs to those you will actually use this font for with the aid of the font-face generator’s easy-to-use options.

I haven’t experimented with the Base64 Encode option as yet, but not all browsers can use it anyway.

CSS Code

I opt for the “Mo’ Bulletproofer” method from Richard Fink as it avoids Internet Explorer making requests of your server which result in 404′s. You can read technical details about the methods using the links under the fields at Font Squirrel’s page if you wish to know about the ins and outs.

Agreement

As you’re putting the resultant files in a publicly accessible place, download-able by all, it’s important that you use fonts that come with the appropriate permissions.

Download Your Kit

Once you’ve signaled your agreement, the download button will appear.

Testing

Extract the zip file you’ve downloaded and open up demo.html in a web browser to see the font at various sizes. Check that it displays in an acceptable fashion at the kind of size you’ll be using it in different browsers. Particularly look out for the display quality in Windows versions of browsers.

Using

Copy the actual font files (e.g. .eot, .ttf, .woff) to your website directory. I place them in a subdirectory called ‘fonts’.

Open up stylesheet.css in your text editor and copy the given CSS into an appropriate CSS file of your own that is used by your pages.

Example CSS:

@font-face {
    font-family: 'BallparkWeiner';
    src: url('ballpark_weiner.eot');
}

@font-face {
    font-family: 'BallparkWeiner';
    src: url(//:) format('no404'), url('ballpark_weiner.woff') format('woff'), url('ballpark_weiner.ttf') format('truetype');
}

font-family can be anything you like.

Unless you keep your CSS file and font files in the same directory, you will need to change the src urls in the CSS. For example, if you keep your font files in /fonts and your CSS files in /css, you would change

url('font_name.ttf')

to

url('../fonts/font_name.ttf')

Then style elements which should be displayed in the new font with CSS. An example:

h1 {
    font-family: 'BallparkWeiner', Georgia, serif;
}

Test in a variety of browsers, and enjoy your new-found typographic freedom!

Further reading

Nice Web Type has some excellent articles on technical details, font licensing information and where to get fonts which can be used with @font-face rules.