Implementing fonts with @font-face

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 .ttf or .otf 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.

Any questions or comments?

  1. Pretty neat, short, to-the-point tutorial :) Nice job Jamy!

  2. isa iso says:

    I´ve just instaleed Chunkfive family as a @font-face in this new brand website http://beta.sandex.yaco.es/ and the fonts gives me problems with the accents.
    Any kind of help would very pleasant to me.
    Thanks

    1. Jamy Golden says:

      If you have a look at these fonts you’ll notice they have something saying “7 Styles” or “1 Styles”, etc. These are the accents they are referring to. Unfortunately it looks like ChunkFive only has one style.

      On a sidenote: You should always download the @font-face kits (which include everything) and remember that when you want to make something bold, you should use one of the bold fonts included in the kit as opposed to changing the font-style css property. If you don’t understand what I mean you can see the examples of how it should be used in the index.html file that comes with the @font-face kits.