Rey Bango

Web developer, honey badger

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:

@font-face {
	font-family: 'SFArchRivalRegular';
	src: local('☺'), url('SF_Arch_Rival-webfont.eot');
	font-weight: normal;
	font-style: normal;
}

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

src: url('fonts/SF_Arch_Rival-webfont.eot');

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

.post {
   font-family: 'SFArchRivalRegular';
   font-size: 18px;
}

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:

@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;
}

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.

@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:

<h2 class="fontdemo">I'm digging @font-face!!</h2>

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!

Choose 3 Developers You’d Spend a Day With

Here’s a question. Given 3 days and allotted 1 day per developer, which 3 developers would you spend it with? Here’s the caveat, the developers MUST BE in the web development community.

Here are my choices in no specific order:

  • Nicole Sullivan – Why? Because she is a freaking CSS guru and the amount of CSS knowledge I could gain from a day of her mentoring would be so incredibly valuable. She’s also a super-cool person.
  • Nicholas Zakas – Why? Well, there are a lot of people who are really awesome JavaScript developers but few, in my opinion, who have the experience in a large-scale environment. Nicholas has that, as the principal front-end engineer for Yahoo! and that’s knowledge worth nabbing. And if you’ve watched his presentations, you know he can teach.
  • Joe Stump – Why? Because Joe is one of the coolest dudes on the planet and apart from that, he has the knowledge to build out BIG sites. Now that he’s focused on geolocation, getting into that would be so cool. Plus, I know Joe loves kids so I could talk to him about babies and stuff. ;)

Now, my list isn’t meant to leave anyone out because there are a ton of people who I’d like to learn from. This is just a group who I feel, at the moment, would offer knowledge that I want right now and they’re just great for providing that. So hopefully, I won’t hurt anyone’s feelings. :)

So who would you pick?

Learn JavaScript!

What to Read to Get Up to Speed in JavaScript.

The best books & blogs for learning JavaScript development. Broken down by experience levels!


My BIG LIST of JavaScript, CSS & HTML Development Tools, Libraries, Projects, and Books.

Constantly updated with the latest and greatest tools. Check it out!

Categories

Rey Bango is Stephen Fry proof thanks to caching by WP Super Cache