Fonts with CSS @font-face Rule

The CSS @font-face rule allows web developers to use any font to display text on a webpage. By using the @font-face rule you’ll no longer be restricted to using the limited amount of fonts that are available on the users computer.

To get the @font-face rule to work correctly, you will need to use the correct syntax as indicated below.

@font-face {
   font-family: 'CustomFont';
   src: url('customfont.eot');
   src: url('customfont.eot?#iefix') format('embedded-opentype'),
   url('customfont.woff') format('woff'),
   url('customfont.ttf')  format('truetype'),
   url('customfont.svg#CustomFont') format('svg');

body {
   font-family: 'CustomFont', Helvetica, Arial, sans-serif;

You may be wondering why we need to specify so many different font formats, short answer, browser compatibility.
Here are the formats for different web browsers:

  • Internet Explorer – EOT
  • Firefox (3.5+) – TTF / OTF / WOFF
  • Chrome – SVG / TTF / OTF
  • Opera – TTF / OTF
  • Safari (3.2+) – TTF / OTF

If you are looking for free fonts to use with the @font-face rule, you can try, they have a large range of fonst that you can download for free. You will then need to convert these fonts to different formats, one site you can try is

I hope you have found this CSS Snippet useful, click here to find more CSS Snippets.

Leave a Reply

Your email address will not be published. Required fields are marked *