Implementing @Font-Face as of Late 2012

Why does one of these font-face render in IE8, but the others don't?

Try creating a new .eot file with one of the others using an online woff/ttf/svg to eot convertor.

• http://www.font2web.com/
• http://www.fontsquirrel.com/fontface/generator <- might have problems because they black list font names.

If this new file doesn't work, then it might be a problem with the font itself. Sometimes IE6-8 has a fit if the Fontname and Family Name are not the same within the actual font file. To fix it:

• You'll need to download FontForge
• Open up the font
• From the menu, choose Element > Font Info
• Ensure the Fontname, Family Name and Name for Humans are all the same
• Save the font as a TTF or OTF and use an online convertor to spit out an EOT file.

Every issue I've had with font-face - if the CSS was correct - worked with one of the above two solutions, so good luck :-) Maybe even try saving the font without any changes in FontForge and converting that online before you fiddle with the name properties.

Well rendered webfont solution

I'm pretty sure the web-fonts, which look ugly, are missing some hinting (edit: Nope, even though hinting is still required to make a font look good on windows, the real problem here was the disabled ClearType in XP. However, this answer has a solution anyway).

Unlike font renderers on other operating systems the windows engine relies on hinting information shipped with the font. If the hinting is missing, bad or broken the font will look ugly - simple as that. Luckly there's a way to add some automatically generated hinting to a ttf-font using ttfautohint. After adding the hinting you can generate the different web-font-formats (eof, woff, etc) you need from the enhanced TTF. Additionally you should try to use SVG fonts if font-smoothing is disabled, since they are always rendered with antialiasing.

I've written an article on how to create web-fonts on Pixels|Bytes, which explains how to add hinting to a font and how to use my Font Smoothie script to enable SVG fonts when necessary. Hope this helps :)

PS: I'm aware that linking to my own blog won't be appreciated here, but I think my post describes a good solution to the problem, so I posted it anyway. Please leave a comment if you want me to remove the link and I'll do so.

What techniques should be employed to optimise @font-face rendering?

I think, you should read this post from Nicholas Zakas.

---

Related Topics