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!

Rey Bango

7 Comments

  1. Great write up on our service. Glad you found it useful! Getting @font-face working cross-browser is definitely not for the faint-of-heart…

    • Thanks Ethan. It’s precisely why I tested out your service. You’ve made using @font-face incredibly easy. I also was testing out Typekit, which is nice, but found it having a couple of rendering quirks which turned me off.

      Also, I wanted to make this post a bit educational as well so being able to actually download the fonts really helped drive the usage scenarios home.

      Apart from that, you guys use jQuery so I had to show my support. :)

  2. fontsquirrel is a very nice :) do you know a service where i can test my changes? so that i can be sure that it works on many different browsers or systems (other than browsershots)?

    Kim

  3. Hi Rey,

    I’ve getting into the Font Squirrel method for the past week or so.

    At first delighted with it, but I have hit head on into the first problem.
    As soon as I started organising sub-pages into subfolders the problems began.
    I can link the sub-pages to the CSS sheet as before and Dreamweaver helps me update links etc. But font is lost and I the pages display as default font (arial in my case). I am guessing that font-face somehow does not allow for different paths.

    I am toying with different ideas, all of them less than ideal:
    1) No subfolders. This means up to 100 pages in the same directory.
    2) Move ‘type’ folder or its contents to main folder. Not sure this will work.
    3) Create new CSS sheets for all subfolders. Will work once site is finished, but I am fearing tons of copying back and forth as I design the site.

Comments are closed.