You are here

Using font-face for great typography

Submitted by Kate on June 15, 2011 - 12:03pm

Let's get this out of the way: I'm a huge typography nerd. So if I seem strangely enthusiastic about fonts and kerning and ligatures and serifs... it's because I am.

Fonts are fun, and the right typographical elements can really make your website stand out. Keep in mind, however, that using too many different fonts or really outrageous novelty fonts can look really bad. Make sure that your content is readable, and that the typography is appropriate for what you are doing. Just because something is fun or funny doesn't mean you should automatically use Comic Sans. In fact, let's just agree not to use Comic Sans.

Fonts are also really difficult and painstaking to design and produce with quality. So please make sure that you are using the font in keeping with the designer's wishes. Some fonts are not legally available to embed, and some have licenses that must be registered or purchased for use. If you have any doubts or questions, a quick email to the designer couldn't hurt!

Okay, no more lectures, I promise. Let's get down to business. This write-up assumes some comfortableness with CSS. There is a great post on Design*Sponge to get you started with CSS, or you can always send me an email!

If you are using a content management system like Drupal or Joomla, there are lots of ways to use custom fonts. These can sometimes look good, but often they look bad, especially across older browsers (I'm looking at you, Internet Explorer). It can also be difficult to make changes once these are set, which is not cool: web sites should not be locked in place, they should be able to grow and change as the organization, design trends, and technology changes. Oops, I promised to get off my soapbox, didn't I?

Enter font-face. It's a way to upload your fonts to your website and use simple CSS to change the typography of your site. Just like you would normally do for a web-safe font like Arial, Georgia, etc. Here's all you have to do:

  1. Find and download a font. I love Smashing Magazine, and they have some great free fonts. A lot of times they specify the licensing restrictions so it's easy to get a font that can be embedded.
  2. Get your webfontkit files. There is a really great tool called Font Squirrel where you upload one or more of your font files and it will pop out everything you need to upload to your site. Neat, huh? Consider donating a little bit to make sure this handy tool stays available and stays free. Font Squirrel also has a ton of free, pre-made font kits, so check those out too!
  3. Upload everything to your site. I would use an FTP tool to do this, but you could also use a content management system. To keep things nice and organized, put it with your other theme or styling files.
  4. Grab that CSS. You can either use @import in your main CSS file, or just copy and paste your fontkit CSS into your main style file. Make sure the URL paths point to the right place.
  5. Add a little CSS. Edit your existing CSS to add your new font family to your site. This might be an obvious step for everyone else, but I forgot to do this and got bummed that my new font wasn't working. I'm trying to save you from that feeling.
  6. Test, test, test! Refresh your site and bask in the glory of being such an awesome person. Now open every browser on your computer and look at your site. Grab your phone and look at your site. Call your grandmother who uses Netscape and have her look at your site. Call your fancy friend with the iPad and have them look at your site! I think you get the point.

Jerimee wants me to add that there is probably an instance where your new font will not work. Be sure to have a backup font in your CSS (for sans serif fonts, it might be something like font-family: 'fancyfont', Helvetica, Sans-Serif) and test it in some browsers with the CSS turned off. I think he is probably right, as usual, but I'm still excited about using pretty fonts.

More resources:
Smashing Magazine: The @Font-Face Rule And Useful Web Font Tricks