Serving fonts with @font-face

@font-face allows you to use any font on your web page. It is supported by all major browsers, and has actually been supported by Internet Explorer for a long time.

To use @font-face, first you have to make sure that your server is returning the correct mime types for fonts. Here are the correct mime types:

• WOFF – application/x-font-woff
• TTF – font/ttf
• OTF – font/otf
• EOT – application/vnd.ms-fontobject
• SVG – image/svg+xml

To do this in apache, add this to your .htaccess file:

AddType font/ttf .ttf
AddType application/vnd.ms-fontobject .eot
AddType font/otf .otf
AddType application/x-font-woff .woff
AddType application/vnd.ms-fontobject .svg

In IIS:

1. Open IIS manager
2. Right click your server and click properties
3. Click Mime Types
4. Add the above mime types

Now in your css file add the font with @font-face.

@font-face {
    /* Name of the font */
    font-family: 'font name'; 
 
    /* This is for IE */
    src: url(/css/fonts/font.eot);
 
    /* This is for all other browsers */
    src: local('font name'), url(/css/fonts/font.woff) format('woff'),
    url(/css/fonts/font.ttf) format('truetype'), 
    url(/css/fonts/font.svg) format('svg');
}

You are all set to use your font now. Use your new font just like you would any other font.

h1 {
    font-family: 'font name', verdana, sans-serif;
}

If your new font can’t be loaded the browser will fall back on verdana, and then sans-serif.

More Info

• Mozilla @font-face article
• Cross-Origin Resource Sharing
• Bulletproof @font-face syntax
• Defining bold, italic, etc… font faces