Make Your Own @font-face Web Font Kits

There are a number of ways to implement web fonts now, but there are still times when the perfect font has not been converted for use on the web. Thanks to Font Squirrel, you can convert any font to an @font-face web font kit.

Before you even think about converting a typeface for use on the web, make sure it’s license explicitly gives permission to do so. Type designers slave over these works of art. Respect their wishes.

Not all fonts are equal

While it’s fun to make your own font face kits, and experiment, realize that most of the typefaces you try this with are going to look like crap. This is because they were not made for our low resolution computer screens. Nice fonts, like the one you are reading right now, are professionally hinted to render nicely on the web. As our resolutions increase, our old print typefaces will look better and better.

This isn’t to say that you can’t have good results, or just be really creative with this method of creating web fonts. Just don’t have delusions of getting the kind of quality most clients deserve for their content using a free font generator to create a webfontkit.

For typefaces not available with a free license, I like to use either Typekit or Font Deck. Both are paid services which serve the font files remotely, and have a small fee for licensing.

Now, carry on with your web font fun . . .

Download fonts

The first thing to do, is to pick a Typeface. You can find free or premium webfonts, or desktop fonts we can convert. Here are my favorite places to get them.

The League of Movable Type – Super Heroes of free fonts. Some of the finest I’ve found.

FontSquirrel.com – Free fonts, web ready @font-face kits, and the web font generator we will use next.

I chose League Gothic by The League of Movable Type for the site I’m working on. It’s free for commercial use with no restrictions on using it for @font-face. Make sure you read any README, or licensing file that comes with the font, some of them have stipulations about @font-face.

Convert to web font

This is just too easy. Go to FontSquirrel’s @font-face Generator. Click “Add Fonts” to upload your chosen font. After uploading your fonts, You’ve got 2 choices. You can either leave the option box on ‘easy” like I do, or select “expert” to fine tune font formats, how they are imported, languages, and encoding. Now that you have made your selections, confirm that you are honoring the font’s EULA, and click “Download Your Kit”. The kit includes a nice preview page and stylesheet showing various sizes, and the font itself of course.

Web font kit building tip

Find a bunch of fonts you like, and create a large kit with all of them. When creating new designs and chosing fonts, copy all of the css from the web font kit into your stylesheet. Now you can easily experiment and find the right fonts for your design. When you have chosen your font, just delete the @font-face styles for the ones you aren’t using.

****Font Demo Warning: Viewing the demo.html file from very large web font kits can lock up your browser.

Upload and import your new web font using CSS

Now that you have your webfont, you can upload it using either an FTP program, or the WordPress Upload feature. I prefer to use FTP, and upload the font to the current theme’s directory. If you use the uploader, just make sure you refer to the font using the correct relative path in the next step.

With your web font on the server, you can now edit your CSS file and use it. If you used the generator, you can just grab the style from the CSS file that was included in it, and add the code to yours using your favorite text editor, IDE, or the WordPress editor.

Here is an example of @font-face syntax.

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('League_Gothic-webfont.eot');
    src: local('☺'),
    url('League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
    url('League_Gothic-webfont.woff') format('woff'),
    url('League_Gothic-webfont.ttf') format('truetype'),
    url('League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

.logo a {
     font-family: 'LeagueGothicRegular', sans-serif;
}

Now our new free @font-face web font is ready for use.

I have a tendency to go a little to far with cool new tricks if I’m not careful. It’s a good idea to make sure that the text is readable, and fairly clean unless it is just being used for the logo. I have chosen to use this web font for headings and navigation only.

Now I need to determine which rules I need to edit, which is faster if you did the markup yourself, or use Thesis. Firebug also makes this a quick process.

Replace the font family in your chosen elements using quotes around the name you set in the @font-face rule, and check out your results.

@font-face Browser Compatability

Compatable @font-face fonts vs browsers *via Fontsquirrel

  • TrueType Fonts for Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+
  • EOT fonts for Internet Explorer 4+
  • WOFF fonts for Firefox 3.6+, Internet Explorer 9+, Chrome 5+
  • SVG Fonts are an XML format supported by some browsers including the iPhone and iPad.

If you are using WordPress and aren’t sure how to add your fonts, read my post How to Use Web Fonts with WordPress