@font-face made easy with Font Squirrel

When designing the new Orrka site, I wanted more punch in my typography. Let's face it, web typography is boring. It's 2009 and as and industry I think we web designers have gotten our money's worth out of Helvetica and its ilk.

Sure, alternatives abound such as sIFR, Cufón, and good old image replacement, but what we really want is simple, standards-based, and legal typography choices. We want every machine on the Internet to have every font from MyFonts installed so we could just use font-family and call it a day. Well maybe that's extreme. We want every machine on the Internet to have the fonts we want to use installed.

@font-face to the rescue

@font-face has been around since CSS2 and has even been supported in Internet Explorer since Version 5. However, Microsoft chose to implement a proprietary font format (.eot) so @font-face has seen limited adoption. Until now. Recently WebKit and Firefox introduced support for @font-face using the OpenType format (.otf). So now between .eot and .otf, we can deliver some nifty new typography to our users. The problem lies in converting your TrueType fonts (.ttf) to these new formats. Jonathan Snook recently had a great article on how to do just that. The process isn't painful but it's not quick either. Further, a lot of us will be repeating the same process for the most popular fonts out there. That's where Font Squirrel comes in.

Just a Font Squirrel looking for a nut

Font Squirrel is like many font sites you already use — except these fonts are 100% free for commercial use and many have licenses that allow embedding on the web.

@font-face kits — the killer feature

Find a font you like, simply preview the @font-face demo and then download an archive containing

• Fonts in .eot format for Microsoft browsers
• Fonts in .otf format for Firefox and Safari
• A demo html page showcasing the font
• CSS file with instructions on how to implement on your web site

Use @font-face to expand your typography choices

To use a font downloaded from Font Squirrel, copy the font files to location on your server. Next, add bulletproof @font-face syntax to your stylesheet:

@font-face {
  font-family: 'League Gothic Regular';
  src: url('League_Gothic.eot');
  src: local('League Gothic Regular'), local('LeagueGothic-Regular'), url('League_Gothic.otf') format('opentype');
}

That's it! Now you can use your shiny new font just like any other:

h1 {
  font-family: 'League Gothic Regular', Helvetica, Arial, sans-serif;
}

So get over to Font Squirrel and store up some cool fonts for the winter!