← back to code snippets


Introduction to @font-face

Posted on October 14th, 2014 by Graeme

Normally when making a webpage, there are only a set of standard fonts for you to choose from to style your text with such as arial, times, courier etc…and often you are depending on the user’s browser/computer to have this font installed.

However, if you make use of the @font-face rule in your CSS file, you can make use of any custom fonts on your website, irrespective of the user’s browser. This is because you store the font on the server, and use the @font-face rule to load your font.

Using @font-face 

  • First, you need to get hold of a font. Cufonfonts is a good place to download one.
  • Once you have downloaded the font, extract the contents of it and put it on your server, possibly where your main CSS file will be
  • Next, you need to define the @font-face rule in your CSS file, something like below:
@font-face {
    font-family: ‘ImpactRegular’;
    src: url('impact-webfont.eot’);
    src: url('impact-webfont.eot?#iefix’) format('embedded-opentype’),
         url('impact-webfont.woff’) format('woff’),
         url('impact-webfont.ttf’) format('truetype’),
         url('impact-webfont.svg#ImpactRegular’) format('svg’);
}

Ensure the 'src’ defined in the above rule is the correct directory (where you donwloaded your font to).

  • Now to apply the font you have defined, just use the name given to your font-face as the font-family anywhere else in your stylesheet, for example:

p{font-family:'ImpactRegular’}