Implementation of @ font-face at the end of 2012

Question

I spent several evenings exploring the best way to implement @ font-face with modern modern browsers. I am a full-time web systems developer with experience as a graphic designer. I find that the possibilities and possibilities with web design are becoming more interesting. So, I did some tests and would like to hear if anyone has any advice, any better ideas or materials about this. My testing scenario is as follows.

I tested with ALOT various online tools and applications, but in the end I turned it into one online service and one application.

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

I used the font that was sent with my Mac, Tamil Sangam MN and Tamil Sangam MN Bold, both of which were open, .otf.

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

Learn Conversion Sizes

Fontontquirrel

This is a good online tool, it is very good. There are several different modes, and I used Basic and Optimal. The result of my .otf file was svg, ttf, eot and woff.

The main

Usual

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

Fatty

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

Optimal

The first thing that I noticed with the help of optimal fonts is that they are much smaller than the basic options ~ 260 KB!

Usual

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

Fatty

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

Fontxchange

This tool can do much more than just drag and drop fonts for the web. It can convert several formats among themselves; like opentype, true type, web fonts, post script and so on. As a result, the very high quality of the files is so great that it is almost twice the size of the basic versions of FontSquirrels and 7 times larger than the version of FontSquirrels Optimal version.

Usual

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

Fatty

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

CSS customization

At first, I was a little puzzled that the actual order in the font list mattered. Then I discovered that some of them take the first format that he finds compatible, rather than sticking to the optimal format - and that sucks. After some work, I found that this is the best way to format your css (pay attention to the order of file types is 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; } 

The results of my tests

Regular fonts

I have indicated the best version with *

Firefox MAC (15.0.1)

• FontSquirrel Optimal: visualizes some fat
• FontSquirrel Basic: visualizes some fat
• FontXChange 4.0: gives a little fat, but kerning is better than the version of FontSquirrel *

Firefox Windows (15.0.1)

• FontSquirrel Optimal: makes it very enjoyable
• FontSquirrel Basic: The font becomes bumpy / intermittent.
• FontXChange 4.0: makes it very enjoyable *

Safari Mac (6.0)

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

Chrome Mac (21.0)

• FontSquirrel Optimal: Some Fat
• FontSquirrel Basic: Some 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: The font becomes bumpy / intermittent.

Bold fonts

Firefox MAC (15.0.1)

• FontSquirrel Optimal: rendering is very thick *
• FontSquirrel Basic: rendering is very thick
• FontXChange 4.0: rendering is very thick, but better kerning (I would like to choose this one for mac, but since Firefox version of firefox is not compatible here, it should go)

Firefox Windows (15.0.1)

• FontSquirrel Optimal: render, not very smooth *
• FontSquirrel Basic: The font becomes bumpy / intermittent.
• FontXChange 4.0: The font is a bit distorted / uneven.

Safari Mac (6.0)

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

Chrome Mac (21.0)

• FontSquirrel Optimal: Perfect render *
• FontSquirrel Basic: good render, a few percent of fat
• FontXChange 4.0: displays fat

Chrome Windows (21.0)

• FontSquirrel Optimal: Perfect render *
• FontSquirrel Basic: Perfect render
• FontXChange 4.0: rendering is very thick

Internet Explorer (9.0)

• FontSquirrel Optimal: Perfect render *
• FontSquirrel Basic: Perfect render
• FontXChange 4.0: The font becomes bumpy / intermittent.

Final implementation

I usually organize my websites in the following template, <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 assignments

There is not a single tool that will supply fonts that port perfectly to Mac and Windows in all browsers. You must experiment and test each font. The methodology outlined above is a simple way and suggestion on how to test and experiment with @ font-face.

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

All the best / T

Answer 1

@ font-face code

You can add src: local('ò?'), Which searches for a local font with that name, causing the browser to ignore local fonts if they have the same name as your own font. You can also use this back to restrict custom fonts from downloading. see mobile support

Usually I see the line ?#iefix after the standard .eot src, although I can’t say that I have ever needed this, and I don’t know if a specific positioning is required (other than that specified by .eot ).

Extra Font Control

If you are looking for extra control with fonts in a script when fonts do not load or deal with FOUC in IE, I have a jQuery plugin that allows you to hide fonts while they are loading and allow changing the font size if it fails so your backup font doesn't destroyed your layout. How do I know if a font (@ font-face) is loaded?

Error IE6-8

In addition, IE6-8 may have problems with some font .eot file. This can be fixed either ( full guide here ):

• Convert the new .eot file online. If this does not work, the problem is with the file properties themselves.
• Use FontForge to edit font file name properties, then save and re-convert.

CORS

This seems to only apply to IE and FF. All other browsers (only the latest versions are tested) have no problems.

CORS is a common font problem and occurs when downloading fonts from another domain or host name. This includes specifying your site using www or not. The @font-face code should be relatively anchored, like a CSS file. You will also have problems defining the <base> in your html. If this is not possible, or if you do not want to worry about CORS, then you need to put the following code in the .htaccess file in the font directory:

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

MIME Types

404 font maintenance questions may be caused by incorrect MIME definitions, see here: Mime type for WOFF fonts?

Mobile support

Mobile support is pretty bad. Android does not support it until 4.0, and Windows Mobile, as far as I know, does not support it at all. I study any work or solutions for this. Best I have to use. How do I know if a font (@ font-face) has already been downloaded? In order to display a text image in case of font loading error, it really only works for site names and icons, otherwise it works terribly bad, bad for SEO and bad UX.

See @font-face support.

In addition, Android versions 2.2 - xxx will fail if your @font-face uses local() , which is also used as a fix for IE. Several stylesheets may be required if you want to cover all your bases. See more details here: https://stackoverflow.com/a/2128778

SVG and Chrome

Chrome will not use the SVG font if you include #fontName in the URL. He will also use WOFF in front of SVG - and does not do a good job of creating it. This is probably the reason everyone says Chrome uses a crispy font. To overcome this, 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'); } }