Implementing @font-face as of late 2012

问题:

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 graphic designer I find the opportunities and possibilites with web design becoming more and more interesting. So, I made some testing and would like to hear if anyone has advices, any better ideas or inputs on this. My testing scenario looks like this.

I tested with ALOT of different online tools and applications but in the end I boiled this down to one online service and one application.

• FontSquirrel, online tool - free. http://www.fontsquirrel.com/fontface/generator
• FontXChange, application for mac/win - 99$. http://fontgear.net/fontxchange.html

I used a font that was shipped with my Mac, Tamil Sangam MN and Tamil Sangam MN Bold, both came as open type, .otf.

• TamilSangamMN.otf - 290 KB
• TamilSangamMNBold.otf - 271 KB

Investigating conversion sizes

FontSquirrel

This is a good online tool, it's very good. There are a few different modes and I've used the Basic and Optimal. The output of my .otf file was svg, ttf, eot and woff.

Basic

Regular

• TamilSangamMN.svg 233 KB
• TamilSangamMN.ttf 71 KB
• TamilSangamMN.eot 25 KB
• TamilSangamMN.woff 30 KB
• Total: 359 KB

Bold

• TamilSangamMNbold.svg 225 KB
• TamilSangamMNbold.ttf 69 KB
• TamilSangamMNbold.eot 25 KB
• TamilSangamMNbold.woff 30 KB
• Total: 349 KB

Optimal

First thing I noticed with the optimal fonts are that they are considerably much smaller than the basic variants ~ 260 KB!

Regular

• TamilSangamMN.svg 33 KB
• TamilSangamMN.ttf 25 KB
• TamilSangamMN.eot 15 KB
• TamilSangamMN.woff 17 KB
• Total: 90 KB

Bold

• TamilSangamMNbold.svg 33 KB
• TamilSangamMNbold.ttf 25 KB
• TamilSangamMNbold.eot 15 KB
• TamilSangamMNbold.woff 17 KB
• Total: 90 KB

FontXChange

This tool can do so much more than just juggling fonts for the web. It can convert several formats between each other; like opentype, true type, web fonts, post script and so on. The result is overall very high quality the files are so large, almost twice the size of FontSquirrels Basic versions and over 7 times bigger than FontSquirrels Optimal version.

Regular

• TamilSangamMN.svg 480 KB
• TamilSangamMN.ttf 72 KB
• TamilSangamMN.eot 72 KB
• TamilSangamMN.woff 80 KB
• Total: 704 KB

Bold

• TamilSangamMNbold.svg 463 KB
• TamilSangamMNbold.ttf 69 KB
• TamilSangamMNbold.eot 70 KB
• TamilSangamMNbold.woff 80 KB
• Total: 682 KB

Setting up the CSS

It puzzled me a bit in the start that the actual order in the font list mattered. Then I discovered that some takes the first format that it finds compatible rather than sticking with the format that is optimal - and it sucks. After some laborations I found that this is the optimal way to format your css (note the order of the file types | important!).

@font-face {
    font-family: 'TamilSangam';
    src: url('.eot');
    src: url('.svg') format('svg'),          
         url('.eot?#iefix') format('embedded-opentype'),
         url('.woff') format('woff'),
         url('.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

My test results

Regular fonts

I did mark the best version with a *

Firefox MAC (15.0.1)

• FontSquirrel Optimal: Renders a bit to fat
• FontSquirrel Basic: Renders a bit to fat
• FontXChange 4.0: Renders a bit to fat, but the kerning is better than the FontSquirrel version *

Firefox Windows (15.0.1)

• FontSquirrel Optimal: Renders very nice
• FontSquirrel Basic: Font gets jagged/choppy
• FontXChange 4.0: Renders very nice *

Safari Mac (6.0)

• FontSquirrel Optimal: Perfect render
• FontSquirrel Basic: Perfect render
• FontXChange 4.0: Perfect render *

Chrome Mac (21.0)

• FontSquirrel Optimal: A bit fat
• FontSquirrel Basic: A bit fat
• FontXChange 4.0: Perfect render *

Chrome Windows (21.0)

• FontSquirrel Optimal: Perfect render
• FontSquirrel Basic: Perfect render
• FontXChange 4.0: Perfect render *

Internet Explorer (9.0)

• FontSquirrel Optimal: Perfect render *
• FontSquirrel Basic: Perfect render
• FontXChange 4.0: Font gets jagged/choppy

Bold fonts

Firefox MAC (15.0.1)

• FontSquirrel Optimal: Renders very fat *
• FontSquirrel Basic: Renders very fat
• FontXChange 4.0: Renders very fat, but better kerning (I would like to select this one for the mac but since the windows version of firefox isn't compatible here it has to go)

Firefox Windows (15.0.1)

• FontSquirrel Optimal: Renders ok, not very antialiased *
• FontSquirrel Basic: Font gets jagged/choppy
• FontXChange 4.0: Font gets a bit distorted/jagged

Safari Mac (6.0)

• FontSquirrel Optimal: Perfect render *
• FontSquirrel Basic: Perfect render
• FontXChange 4.0: Renders fat

Chrome Mac (21.0)

• FontSquirrel Optimal: Perfect render *
• FontSquirrel Basic: Good render, a few percent to fat
• FontXChange 4.0: Renders fat

Chrome Windows (21.0)

• FontSquirrel Optimal: Perfect render *
• FontSquirrel Basic: Perfect render
• FontXChange 4.0: Renders very fat

Internet Explorer (9.0)

• FontSquirrel Optimal: Perfect render *
• FontSquirrel Basic: Perfect render
• FontXChange 4.0: Font gets jagged/choppy

The final implementation

I usually organize my webfonts in the following pattern, <webfonts> / <conversion source> / <conversion method> / <fonts>

/* Regular */
@font-face {
    font-family: 'TamilSangam';
    src: url('webfonts/fontsquirrel/optimal/tamil_sangam_mn.eot');
    src: url('webfonts/fontxchange/TamilSangamMN.svg#TamilSangamMN') format('svg'),
         url('webfonts/fontsquirrel/optimal/tamil_sangam_mn.eot?#iefix') format('embedded-opentype'),
         url('webfonts/fontxchange/TamilSangamMN.woff') format('woff'),
         url('webfonts/fontxchange/TamilSangamMN.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Bold */
@font-face {
    font-family: 'TamilSangam';
    src: url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.eot');
    src: url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.svg#tamil_sangam_mnbold') format('svg'),
         url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.eot?#iefix') format('embedded-opentype'),
         url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.woff') format('woff'),
         url('webfonts/fontsquirrel/optimal/tamil_sangam_mn_bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

Graphical overview of the result (fullsize at http://i.stack.imgur.com/atb98.png)

Conclusions and quests

There isn't one single tool out there that will deliver fonts that render nice on the Mac and Windows in all browsers. You must experiment and test on each font. The methodology posted above is just a simple way and suggestion how to test and experiment with @font-face's.

Is there anything you think I could change in my methods or implementation, is there any application or service that I missed?

All the best / T

回答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');
    }
}