@font-face

What's @font-face?

@font-face is for loading up and using your own custom fonts, rather than the limited set of standard system fonts already installed on computers that browsers have access to.

@font-face {
   font-family: 'MyWebFont';
   src: url('webfont.eot'); /* IE9 Compat Modes */
   src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('webfont.woff') format('woff'), /* Modern Browsers */
      url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
      url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

You can use it like this:

body {
   font-family: 'MyWebFont';
}

Font Formats

WOFF

Web Open Font Format. Created for use on the web, and developed by Mozilla in conjunction with other organizations, WOFF fonts often load faster than other formats because they use a compressed version of the structure used by OpenType (OTF) and TrueType (TTF) fonts. This format can also include metadata and license info within the font file. This format seems to be the winner and where all browsers are headed.

SVG/SVGZ

Scalable Vector Graphics (Font). SVG is a vector re-creation of the font, which makes it much lighter in file size, and also makes it ideal for mobile use. This format is the only one allowed by version 4.1 and below of Safari for iPhone. Currently SVG fonts are not supported by Firefox, IE or IE Mobile. Firefox has postponed implementation indefinitely to focus on WOFF. SVGZ is a zipped version of SVG.

EOT

Embedded Open Type. This format was created by Microsoft (the original innovators of @font-face) over 15 years ago. It’s the only format that IE8 and below will recognize when using @font-face.

OTF/TTF

OpenType Font and TrueType Font. These formats could easily and illegally be copied.

Serve Cross-Domain Fonts

For security reasons, Firefox or Internet Explorer simply don't allow you to use by default a font that is not hosted on your domain, not even on your subdomain. The CDN based websites can be also affected in this case.

After some investigations, I found out the workaround: set a Access-Control-Allow-Origin header to the font.

The code can be placed in the .htaccess file within the same folder as the font file.

<FilesMatch "\.(ttf|otf|eot|woff)$">
   <IfModule mod_headers.c>
      Header set Access-Control-Allow-Origin "*"
   </IfModule>
</FilesMatch>

If you are using nginx as your webserver you will need to include the code below in your virtual host file.

location ~* \.(eot|otf|ttf|woff)$ {
    add_header Access-Control-Allow-Origin *;
}

View Demo

Related Posts

• What’s the deal with declaring font properties on @font-face?
• Using @font-face
• Firefox doesn't allow cross-domain fonts
• Serving Fonts from CDN