Introduction

Creative typography has long been unavailable to most designers on the web. We’re stuck with the same old boring fonts installed on all machines: Arial, Times New Roman, Georgia, etc. However, recent advances in browser technology and typographic tools are affording us new opportunities. Font license permitting, with very little effort, you can now choose from hundreds of fonts and still support 90%-95% of today’s browsers with very little effort. This article will tell you how.

Choosing the Right Font

If you have the authority to select the font that is used in your project, then your first step is the most important – choosing a font with the appropriate license. This can be a complicated issue, so if you wish to follow the path of least resistance, then head straight to Font Squirrel and choose one of the fonts offered on their site. All are free for commercial use in print or on the web. While there are other sources of free fonts on the web, some are of questionable quality. Also keep in mind that free for desktop use doesn’t necessarily mean free for web use. Font Squirrel has done the hard work of sourcing fonts from all over the web that are not only free for web use, they are of high quality as well.

Figure 1:
Font Squirrel is a great source of free fonts and the @font-face Generator

If you can’t find the right font at Font Squirrel, you’re not completely out of luck. Some foundries offer commercial licenses for web fonts, but be sure to carefully check the End User License Agreement (EULA). The license needs to allow something called unencrypted (or raw) font linking (.ttf, .otf, .woff) in order to follow the steps in this article.

Generating the Required Files

There are many different ways to download the necessary files and code from Font Squirrel, but I’m going to show you the easiest and safest method that will work with 90%-95% of all browsers. Once you’ve selected a font at Font Squirrel, download it to your desktop. Font Squirrel offers prepackaged @font-face Kits, but in this case we’re just going to download the TTF or OTF file because the @font-face Kit is overkill for our needs. You can simply browse all the fonts until you find one you like, then download the .ttf or .otf file.

Figure 2:
Font Squirrel font download vs. Kit download

After downloading the TTF or OTF file, visit their @font-face Generator web tool. Here we’ll upload our font, select some options, and download some generated files. So, after uploading your font (in our example below, “Daniel Regular”), here are the selections we want to make:

Figure 3:
Font Squirrel @font-face Generator

Implementing @font-face

Click on the “Download your Kit” button, and Font Squirrel will produce five files – three font files, a CSS stylesheet, and a demo HTML file. Upload the font files (.eot, .ttf, and .woff) to your server – these are the font files you’re going to link to. The HTML and CSS files are simply demo files to help you style your markup appropriately. The CSS file has two rules – let’s take a look at them:


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


The first rule is for all browsers except Internet Explorer, and the second rule is only for Internet Explorer. Go ahead and add the first rule to your main stylesheet. Then, create a second stylesheet just for IE and add the second rule there. In your document head, include your primary stylesheet and then your IE stylesheet using conditional comments. For example:


<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<!--[if IE]><link rel="stylesheet" type="text/css" href="style-ie.css" media="screen" /><![endif]-->


So what’s going on here? The separate stylesheets and conditional comments ensure that each browser is served the proper font format. The first property inside the @font-face rule is where we define the name of the font. We can call it anything we want, and in this case we’re going to call it ‘DanielRegular’.

The second line is where we define the location of the font file. In the case of IE, this is the EOT font.

For all other browsers, the second line is a little more interesting. It has three comma delimited value pairs. The first value pair is actually a bit of misdirection for Internet Explorer. Normally, IE will attempt to download the TTF and WOFF files which it can’t actually use. That creates an unnecessary HTTP request which we would like to avoid. The syntax of the first value pair will cause IE to bail out and simply use the EOT file already defined, and other browsers will simply ignore it and continue on. The second value pair is the WOFF font file which will be used if the browser supports it (currently only Firefox 3.6). The third value pair is the True Type Font which will be used by Safari, Chrome, Opera, and Firefox 3.5.

After adding the @font-face rules to your CSS, you’re ready to go. Now when you’re defining your font-family elsewhere in your CSS, you can use ‘DanielRegular’ like this:

        
    .title {
    	font-family: DanielRegular, Arial, Sans-Serif;
    }
    

That’s it! This method supports Internet Explorer 4+, Firefox 3.5+, Safari 3.1+, Chrome 4+, and Opera 10+. That’s about 90%-95% of all browsers, and that number is only going to go up. If closing that last 10% gap is important to you, read our companion article Web Font Realities – A Case Study in Implementing Custom Fonts on a Modern Web Site.

Performance Tuning and Browser Quirks

You’ve got everything you need to begin using web fonts on your site at this point. However, there is some additional performance tuning that you can perform, and there are some dangers you should be aware of.

Because your custom font is not pre-installed on the end user’s machine, it must be downloaded from your server to the user’s browser which may cause a FOUT, or Flash Of Unstyled Text. The FOUT occurs while the fonts are being downloaded for the first time. Depending on the browser, the user may see either a blank space or a default font until the download is complete. It is therefore important to minimize the download time in order to eliminate or at least reduce the duration of the FOUT.

File Size

The first thing to consider is file size. A typical font face is around 50KB of data. Add in bold and oblique faces and you’ve got 150KB of data the user must download. So make sure that each font you use will bring enough value to the user to justify the additional download time. Once you’ve decided on your font faces, the following techniques can help reduce their file size.

Subsetting

A typical font face may have hundreds of glyphs, or characters. In addition to the standard latin alphabet, there are numbers, symbols, accented characters, foreign languages, etc. Subsetting allows you to select only a portion of the total glyphs to include in your font file. The subsetting process is made easy by the Font Squirrel @font-face generator. By default, the generator will use the Mac Roman subset which is more than adequate for most use cases. However, if your web site is only going to display English letters and numbers you should select the Basic Latin subset, cutting the number of glyphs in half and reducing the file size of the font. In our example above, our font was reduced from 53KB to 37KB just by subsetting to Basic Latin.

Gzip

In addition to subsetting you can configure your server to deliver the fonts using Gzip compression (WOFF and EOT are already compressed, so no need to Gzip those) with a future expiry date. Gzip will further reduce the file size and the expiry date will ensure that the user’s browser will cache the fonts after the initial download. Gzip can give you a 25%-50% savings in file size, so it’s definitely worth the effort.

Internet Explorer Quirks

There are a few special precautions you need to take for Internet Explorer. First, make sure that all the fonts linked in your CSS are actually being used on your site. Internet Explorer will download all files linked from your CSS file whether they are actually used or not.

Second, make sure that your @font-face rule is defined before any <script> tag is encountered. There is a bug in Internet Explorer that will cause @font-face to fail if the <script> tag is encountered first. CSS before Javascript is a good practice in general.

Targeted Downloads

As with any other file that must be downloaded by the user (CSS, Javascript, images), target your font downloads appropriately. If the font is used site wide, it makes sense to include the @font-face in your global CSS. However, if the font is only used by a few pages on the site, then it makes sense to create a specific CSS file just for those pages. That way the font will only be downloaded by users that visit those specific pages.

URI Encoding

I also recommend that you do not URI encode your fonts. It’s possible to use Base64 encoding to store your font files in CSS, but this can actually increase the size of the font. Additionally, because URI encoded fonts are generally stored in a single CSS file the browser will download all the different formats whether it can use them or not.

Local SRC

You may have noticed that there are three styles of CSS in the Font Squirrel @font-face generator. I recommend the Mo’ Bulletproof method because it avoids using a local source reference. Using a local source can theoretically improve performance because the browser will look for the font on the end user’s machine, but it’s been reported that Opera can crash in certain situations (my own testing has confirmed this). It’s also possible that a user might have a corrupt font which could potentially cause problems. Ultimately, it’s simply safer to deliver the font from your own server over which you have complete control.

Testing

Finally, it’s very important to test. @font-face is an emerging technology with behavioral and rendering variations between browsers. Make sure you test all the major browsers on both Mac and Windows platforms and continue testing as new browser versions are released.

Conclusion

Thanks to modern browser support for the @font-face rule and tools like Font Squirrel’s @font-face Generator, creative typography on the web is here today. If you follow the steps outlined above, you’ll be able to serve up custom fonts to the majority of your users today in a performant manner. If you’d like to read more about Web Typography in general or find out what you can do when your font license isn’t quite so liberal, read our companion articles “What to Know When Considering Custom Fonts for Your Web Site” and “Web Font Realities – A Case Study in Implementing Custom Fonts on a Modern Web Site”.