CSS-Plus
CSS-Plus
Play with web technologies

Implementing fonts with @font-face

May 18, 2010
Attention: This article is old and the content is outdated. I've left the article here for historical purposes.

This is probably one of the coolest CSS3 features, along with box-shadow and border-radius. @font-face was introduced in CSS2 by IE and it has been around since IE 5. Most browsers have the ability to use .otf or .ttf fonts, however IE has to be difficult - it only supports.eot fonts. Luckily it is very easy to implement all of these file types.

How you say? Well I used to find a .ttf or .otf file and then try and find a converter in order to convert it to an .eot - I never managed to get this to work though. Thankfully, fontsquirrel.com exists. Not only can you find font files to download, but you can download entire @font-face kits, which does absolutely everything for you by giving you the @font-face CSS code, as well as all of the font files you will be needing.

The CSS

@font-face {
    font-family: "Chunkfive";
    src: url("../fonts/Chunkfive-webfont.eot#") format("eot"), url("../fonts/Chunkfive-webfont.woff") format("woff"),
        url("../fonts/Chunkfive-webfont.ttf") format("truetype"), url("../fonts/Chunkfive-webfont.svg#webfontM8M0EYs2")
            format("svg");
    font-weight: normal;
    font-style: normal;
}

/* Applying it to some text */
p {
    font-family: Chunkfive, Arial, Helvetica, Sans-Serif;
}

It is as simple as that! The HTML would simple be a <p> tag containing some text. The other fonts that have been called for the <p> element are added as a backup in case our newly-added-font doesn't load for some reason.

What is actually going on?

  • Line 2 - A CSS name for the font has been declared - "Chunk-five"
  • Line 3 - The first source file, .eot, solves IE's problems.
  • Line 4 - This searches for a local version of the font file and uses it instead of downloading it again.
  • Line 5 - .woff files are supported by Firefox 3.6+. This file font type has the ability to be a compressed version of .otf and .ttf fonts and unlike the latter, .woff fonts can contain meta data.
  • Line 6 - The standard .otf file is loaded.
  • Line 7 - .svg fonts are supported by most modern browsers except Internet Explorer. These files are small and a single .svg font file can contain multiple types of fonts.
  • Line 8 & 9 - This makes sure that the website knows Chunkfive is the regular text and that when you add font-weight: bold or font-style: italic, it should change shape.

Why are all these fonts included in the CSS you say? They are a backup. They don't hurt anyone or anything by being included in the CSS, but if one of the files gets deleted or becomes corrupt, the font-file will be swapped out and the website will carry on as usual.

I have tested these @font-face fonts with:

  • Chrome 4.0 +
  • Firefox 3.5 +
  • Internet Explorer 5 +
  • Opera 10.5 +
  • Safari 3.1 +

If you find that this works on an earlier browser version than I have above, let me know and I'll update the list.

!important

Make sure you are legally allowed to use the fonts you wish to use on your website! fontsquirrel.com is a great free-font resource, but be sure to read the license agreement attached.

Conclusion

The CSS code doesn't feel wonderful to type out, but it works in ALL major browsers which is what counts. I noticed the font looked a tiny bit jagged in IE 8 (IE 7 seemed fine). I solved this by creating an IE8 only stylesheet and I changed the font's opacity to 90%.

p {
    filter: alpha(opacity=90);
}

In short, I think this is very awesome.

Demo