Quick and Easy Guide to Using Custom Web Fonts

Posted Saturday, October 13th, 2012 in Tutorials
Quick and Easy Guide to Using Custom Web Fonts

When it comes to web or graphic design, the fonts you use play a vital role in the overall design and success of your site. I have even seen beautiful websites that use absolutely zero images in the design of the website and still look amazing!

But, to use web fonts in your websites, you’re likely going to use Google Web Fonts (which is a great free service, although it seems limited), or you will have to pony up some money to pay for a service like TypeKit. This is how I implemented custom fonts on my website for several months!

That is, until I found out about the new @font-face property that was released with CSS3.

@Font-Face in CSS3

You may be asking yourself why we needed @font-face to use custom fonts when there were already other options such as Cufon and images? Well, using @font-face will allow you to use custom fonts, but it will also give you other functionality, such as:

  • The ability to search the text
  • The ability to edit the text using CSS using CSS such as line-height, text-shadow, etc.
  • Increased support for assistive reading devices
  • Translation capabilities

As you can see this is a very powerful tool that you can now use for your web projects. Using @font-face is not too much different from using any other font-family, with the exception that you have to declare the the name for your new font as well as the source.

The difficulty lies in the fact that we will have to serve up different versions of the font (woff, ttf, eot, etc) since no single font type is support by all browsers. Because of this, your @font-face declaration might end up looking like:

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

}

I grabbed this font kit from Font Squirrel (more on this later). Notice how there are several different versions of the font as well as a font-weight and font-style.┬áDoes that look a bit difficult? Yep. But don’t worry, because that Font Squirrel tool I mentioned earlier makes it SUPER easy!

Once you’ve made the @font-face declaration, you can use the font as you normally would any other font.

h1 {font-family: 'ActionManRegular';}

How to Generate Font Kits

The easiest way I have found to generate font kits is by using Font Squirrel’s @font-face generator. There are just a few steps:

  1. Add your font. After you select your font, and verify that you can use it for web embedding, Font Squirrel works in the background to create your font kit.
  2. Download your font kit.
  3. Start using your custom font! Font squirrel downloads your font as a zip archive. Unzip it and add it to your web project. That’s it!

Conclusion

Using @font-face is a great way to use custom fonts in your website while also keeping standard text capabilities (such as searching). And with tools like Font Squirrel’s @font-face generator, there’s nothing stopping you from taking advantage of this new ability.

The only thing you need to do now is find some amazing fonts for your next web design. Look for some great font suggestions in the near future.

Leave a Reply