Using @font-face and Font Squirrel to Enhance Your Site with Fonts

I’ve been dying to check out @font-face and so I popped over to Font Squirrel to see what they offered. Originally, I thought it was going to be a paid service but the cool thing is that they offer 100% “free for commercial use” fonts! They even have some nice font kits already setup. The reason that the kits are great is because depending on the browser you’re using, you may need a different font format for the browser to render the font correctly. See, even though @font-face is being hyped up now in CSS3, it’s more of a standardization effort and not really a new feature. In fact, @font-face is supported in IE6. Seriously.

The basic premise is that you define the available fonts beforehand in your css file by declaring an @font-face rule. For example, I downloaded a font called “Arch Rival” and grabbed the whole kit because it included the font formats for every major browser as well as iPhone & iPad and I wanted to make sure they rendered correctly.

Typically, you would manually go into your CSS style sheet and enter a @font-face rule like this:

[code language=”css”]
@font-face {
font-family: ‘SFArchRivalRegular’;
src: local(‘☺’), url(‘SF_Arch_Rival-webfont.eot’);
font-weight: normal;
font-style: normal;
}
[/code]

where src is the path to your physical font file. So yes, you can specify relative pathing for your font file like this:

[code language=”css”]
src: url(‘fonts/SF_Arch_Rival-webfont.eot’);
[/code]

Once defined, you can now use the font’s semantic name to style a specific selector like this:

[code language=”css”]
.post {
font-family: ‘SFArchRivalRegular’;
font-size: 18px;
}
[/code]

This is fairly easy for a one-off type of deal but when you’re dealing with font that could have various rendering formats such as bold, italics, bold italics, extended italics, etc., entering all of this can become really tedious. If you don’t believe me, just check out the following style sheet. Font Squirrel takes the pain out of this.

When you download a font kit, you have a choice of downloading one big bundle with all of the necessary formats or using a font builder that allows you to select which format you’d like to use:

In my case, I chose everything and the really great thing is that the kit brought a pre-made CSS style sheet with all of the font definitions as well as a demo HTML file which included declarations that referenced the new font! This made it incredibly easy to get up and running quickly. If we look at the CSS style sheet declaration, we can see that the src property declares a number of additional formats for the Arch Rival font including the format() hint to define the format type:

[code language=”css”]
@font-face {
font-family: ‘SFArchRivalRegular’;
src: url(‘SF_Arch_Rival-webfont.eot’);
src: local(‘☺’), url(‘SF_Arch_Rival-webfont.woff’) format(‘woff’), url(‘SF_Arch_Rival-webfont.ttf’) format(‘truetype’), url(‘SF_Arch_Rival-webfont.svg#webfontPgLtCzUx’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
[/code]

If we look at the demo page, we can see how the various font declarations affect the page.

So I decided to play a little more with some other fonts and pulled down a kit called “True Crimes“. I copied the font files into their own directory, updated the included style sheet to point to the right directory and then included the code into my blog.

[code language=”css”][/code]
@font-face {
font-family: ‘TrueCrimesRegular’;
src: url(‘/fonts/true-crimes-webfont.eot’);
src: local(‘☺’), url(‘/fonts/true-crimes-webfont.woff’) format(‘woff’), url(‘/fonts/true-crimes-webfont.ttf’) format(‘truetype’), url(‘/fonts/true-crimes-webfont.svg#webfontWTZyAk71’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
h2.fontdemo {font: 60px/68px ‘TrueCrimesRegular’, Arial, sans-serif;letter-spacing: 0; }
[/code]

If you’re curious about the multiple src property declarations, it has to do with IE and its support of the Embedded OpenType (.eot) font format, which no other browser supports. The declaration order ensures that IE will be able to find the right font file without falling over itself. Paul Irish has a nice explanation of the issue so be sure to read it.

Now, I can have a little fun whenever I want to by simply declaring an H2 header tag with a class of “fontdemo” and some text like this:

[code language=”html”]
<h2 class="fontdemo">I’m digging @font-face!!</h2>
[/code]

which gets me this:

I’m digging @font-face!!

A Bit of a Warning

Keep in mind that when you use @font-face in your site, you’re now adding another HTTP request which could end up slowing down your page load. This is especially important to consider if you decide to use a remote font hosting service. Be sure to read Steve’s thorough analysis of @font-face performance before going hog wild on your site. :)

An Update

Paul Irish pointed out the I had left out the local(‘☺’) directive from the @font-face rule, which is really important in terms of performance since, as Paul wrote:

if it just so happens that a user actually has your custom font installed, this’ll save them the download. The primary reason is that you cede control to the user’s machine, potentially showing a locally installed font instead of the one you want to serve. While that will load faster, there’s a very small chance the file could be wrong.

To account for this gotcha, I’ve specified a local font name of ‘☺’. Yes, it’s a smiley face. The OpenType spec indicates any two-byte unicode characters won’t work in a font name on Mac at all, so that lessens the likelihood that someone actually released a font with such a name. This technique is recommended if you think a locally installed version of this font is not in your best interest.

Also, because the local(‘☺’) directive isn’t supported it IE, it will simply ignore the second src declaration (which is for non-IE browsers) ensuring that you don’t have an extra request that will issue a 404 and slow down your page’s performance.

Thanks Paul!