How to Use @font-face

For years web designers struggled with Web Typography. We were stuck with a small number of “web safe” fonts, seriously limiting the typographic quality of the websites we designed. For the longest time virtually the only way to use a non-web-safe font was via an image or flash – both of which are far from ideal and couldn’t let web designers do what we wanted to with our many beautiful fonts.

A New Age in Web Typography

With huge leaps in browser capabilities, beautiful web typography is finally a reality. Services like Typekit and free services like Google Web Fonts, Font Squirrel, and webfonts.fonts.com allow web designers and type enthusiasts to finally be able to use the fonts we want. CSS’s @font-face is where web typography is quickly headed. The web’s typographic future is certainly looking beautiful.

How to Use @font-face

@font-face is without a doubt the best option for web designers to create beautiful web typography. Not only is @font-face flat out amazing, is incredibly simple to use. It only requires a few lines of CSS and then declare the font-family just like you would any other font on the web.

body { font-family: web-font, fallback-fonts; }
strong { font-family: web-font-bold; }
em { font-family: web-font-italic; }
 
@font-face {
    font-family: 'web-font';
    src: url('web-font.eot?') format('eot'),
         url('web-font.woff') format('woff'),
         url('web-font.ttf') format('truetype'),
         url('web-font.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'web-font-bold';
    src: url('web-font-italic.eot?') format('eot'),
         url('web-font-italic.woff') format('woff'),
         url('web-font-italic.ttf') format('truetype'),
         url('web-font-italic.svg') format('svg');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'web-font-italic';
    src: url('web-font-bold.eot?') format('eot'),
         url('web-font-bold.woff') format('woff'),
         url('web-font-bold.ttf') format('truetype'),
         url('web-font-bold.svg') format('svg');
    font-weight: normal;
    font-style: italic;
}

Due to average @font-face font file sizes and to keep load time to a minimum, we recommend at the absolute most, only using five fonts via @font-face but three or lower is a more realistic and ideal number.

For full cross browser compatibility with @font-face, make sure you use each of the web font formats – .eot, .woff, .ttf, and .svg. The file formats required for @font-face can be generated on FontSquirrel.com’s @font-face Generator.

CSS @font-face in Action

Bold Perspective itself uses @font-face for Garamond, the serif font scattered about. Take a look at the Jokal Demo, Abberdein, or Lost World’s Fairs for other great examples of @font-face in action.

CSS @font-face Cross Browser Compatibility

@font-face is completely cross browser compatible with all major web browsers as well as most less popular web browsers. Surprisingly, @font-face has been around for a while and is even supported by old versions of IE. ^*

• Internet Explorer 4+
• Chrome 4+
• Mozilla/Firefox 3.5+
• Safari/iOS 3.1+
• Opera 10+

Obtaining Fonts to use with CSS @font-face

The main reason it took @font-face so long to become popular was not due to cross-browser compatibility, but was primarily due to licensing issues. Most type foundries were reluctant to release @font-face licenses for their very expensive font families. Now that type foundries have finally come around, there are a wide variety of inexpensive or free ways to obtain @font-face licenses.

Inexpensive Web Fonts: GeoCon Light, Font Squirrel, Font Deck, Font Spring, Typekit

Free Web Fonts: Jokal, Clumsy, Exljbris Font Foundry, Junction, Maven Pro, Google Web Fonts

Making your own Web Font for use with CSS @font-face:
Making your own font is an incredibly time consuming and difficult undertaking. But, if you persevere and make a web font, the wonderful boys at Font Squirrel have made it very easy to turn your font into the formats required for @font-face.
Make your own @font-face set

Optimizing Web Typography and @font-face

• Lettering.js – Kerning Type on the Web, great for fine tuning your @font-face fonts
• Fit Text JS – get your typography to fit full width within a container
• Using Text-Shadows to improve web typography
• Wordmark.it – Test Fonts in your Web Browser
• WhatFont Bookmarklet – Identify typefaces, font-sizes, and line height while browsing
• Typesetter – compare font family, font sizes, line height, color, and more side-by-side
• Google Web Fonts – a quickly growing free @font-face library

Wrap Up

We hope you have fount this article and these resources on CSS @font-face useful. If you have any questions or wish to add some tips, @font-face resources, or @font-face fonts, please contact us or hit is up on Twitter.