currently reading

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 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’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. *
Cross Browser Compatability

  • 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.

GeoCon LightInexpensive 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

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.

Click to Expand

Recent Tweet Twitter Bird

follow us on twitter, on Facebook, and on Google+.