Implementing @font-face as of late 2012

Question

I\'ve been spending a few evenings investigating the best way to implement @font-face with todays modern browsers. I am a full time web/system developer with a background as a g

Answer 1

@font-face code

You can add src: local('ò?'), which looks for local font with this name, forcing browser to ignore local fonts if they happen to have the same name as your custom font. You can also use this inversely to restrict custom fonts from downloading. see mobile support

I generally see the ?#iefix line second after the standard .eot src, though I can't say I have ever needed it, nor know if specific positioning is required (apart from the .eot being listed first).

Additional control over the fonts

If you are looking for more control with the fonts in the scenario where fonts fail to load, or dealing with the FOUC in IE, I have a jQuery plugin which will let you hide fonts while they are loading, and allow you to alter the font size on fail so your fallback font doesn't destroy your layout. How to know if a font (@font-face) has already been loaded?

IE6-8 bug

Additionally, IE6-8 can have issues with some font's .eot file. This can be fixed by either (full guide here):

1. Converting a new .eot file online. If this doesn't work, then the problem is the file properties themselves.
2. Use FontForge to edit the name properties of the font file, then resave and reconvert.

CORS

Seems to only relate to IE and FF. All other browsers (only latest versions tested) don't have problems.

CORS are a common problem with fonts and occur when you are loading fonts from another domain or hostname. This includes specifying your site with a www or not. The @font-face code needs to be relatively referenced, as does the CSS file. You will also have issues if defining a <base> tag in your html. If this isn't possible, or if you don't want to worry about CORS, then you'll need to place the following code in an .htaccess file in your font directory:

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

MIME Types

404 issues on font serving may be caused by incorrect MIME definitions, see more here: Mime type for WOFF fonts?

Mobile Support

Mobile support is pretty bad. Android doesn't properly support it until 4.0, and Windows Mobile, as far as I am aware doesn't support it at all. I am investigating any work around or solutions for this. Best I have so far is to use How to know if a font (@font-face) has already been loaded? to display a picture of the text on font load failure. This really only works for site titles and icons, otherwise it's a horribly poor work around, bad for SEO and bad UX.

See @font-face support.

Additionally, Android 2.2 - x.x.x versions will fail if your @font-face uses local(), which is also used as a fix for IE. Multiple stylesheets may be needed if you want to cover all your bases. See more here: https://stackoverflow.com/a/4520467/1455709

SVG and Chrome

Chrome won't use the SVG font if you're including the #fontName in the url. It'll also use WOFF before SVG - and doesn't do a good job rendering it. This is probably the reason why everyone sooks about crappy font rendering in Chrome... To overcome this is an additional @font-face declaration is required:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'myFont';
        src: url('fonts/myFont.svg') format('svg');
    }
}