CTS – Your Technology Partner

@font-face and Web Font Freedom

Written by Craig Butler on December 6, 2012

By: Jake Beaton

If you’ve ever developed a website, you’re likely familiar with the concept of web safe fonts. Due to the way fonts are rendered in browsers, designers and developers have been limited to the fonts installed on user’s machines for most of the web’s history. This is what led to the notion of web safe fonts, so called because they are virtually guaranteed to be installed on any visitor’s computer.

This is why you’re probably very familiar with the following two font stacks:

font-family: ‘Times New Roman’, Times, serif;

font-family: Arial, Helvetica, sans-serif;

When it comes to typography, there is nothing wrong with these fonts. They’re so ubiquitous because they’re so close to perfect. Perfect or not, if the typography on your site evokes memories of double-spaced, high school English papers, that’s a good sign that it’s time to change things up a bit.

Recently, the @font-face CSS rule has allowed us to break free of these web safe fonts into the world of true web typography. By temporarily installing a font to a user’s computer, @font-face allows us to include previously unsafe fonts in production websites.

Think about the implications of this for a moment. Without the use of background images or CSS hacks, you can produce attractive logos and headers from any properly licensed font using only CSS.

Even better, @font-face is incredibly simple to use. Simply place the font files on your web server then include the @font-face CSS in your stylesheet as follows:

@font-face { 
font-family: 'Roman Caps'; 
src: url('styles/fonts/Roman_SD-webfont.eot'); 
src: url('styles/fonts/Roman_SD-webfont.eot?#iefix') format('embedded-opentype'), 
url('styles/fonts/Roman_SD-webfont.woff') format('woff'), 
url('styles/fonts/Roman_SD-webfont.ttf') format('truetype'), 
url('styles/fonts/Roman_SD-webfont.svg#RomanCapsRegular') format('svg'); 
font-weight: normal; 
font-style: normal; 

To briefly explain the code above, the first line is the font-family name you assign your newly added font while the following lines contain the relative paths to the font files themselves. As you may have noticed, the src attribute appears twice. If you guessed that this is because a certain browser implements the rule differently than all of the others, you would be right. Internet Explorer requires a .eot file type, which has to be listed separately since IE would otherwise ignore the entire src declaration as a result of not understanding the other file types.

To use the font, just declare it as you would any other font family and marvel at your newfound freedom.

font-family: Roman Caps, Times, serif;

You may be thinking “This is great Jake, but where do I get the fonts?”. Luckily for us there are a plethora of independent designers and type foundries eager to share their work with the world. A few of the better sources are Google Fonts and DaFont, but I personally prefer FontSquirrel for their @font-face generator and their @font-face kits.

These kits are freely available for download, containing all the necessary font files as well as sample CSS and all fonts are guaranteed to be properly licensed for @font-face use. (A word of caution: not all “free for personal and commercial use” fonts may be legally hosted on your server. When using a new font, always confirm that it is licensed as a web font.)

Currently, @font-face is supported in all major browsers. Given the recent surge in interest in web typography, this promises to be @font-face’s most popular year yet. However, just because you can use any font you want doesn’t mean you should use any font you want. It’s up to you as the designer/developer to make the right typographical decisions to enhance your design and deliver your message.

Have fun and let us know if you come across any interesting tips or tricks!