CSS3 @font-face is not as ready as you would think

by Cedric Dugas on July 20, 2009

@font-face is one of the new CSS3 feature that has been implemented in every major browser beside IE, this is also the kind of stuff that can degrade really well in non compliant browsers. Let’s face it, sIFR is really painful to implement as with most text replacement techniques. @font-face could solve this problem, web designers will be happy and web developers can implement it in 30 seconds.

Maybe some of you guys saw it, but I really tested a load of fonts with @font-face in this website. Unfortunately it has not turned out as well as I would have liked to.

// So easy
@font-face {
 font-family: "Helvetica neue normal";
 src: url("http://site/fonts/helvetica.ttf")
 font-weight:normal
}
 
.textStuff{
 font-family:Helvetica neue normal,arial;
}

The biggest problem I have right now is how the font is being rendered. Most of the time the font becomes a bit jagged, not exactly rendered as the real font. This problem become more apparent with small size, text with a font size of 10 or 11 as a bad habit of being blurry. There is also differences in the rendering of fonts between browsers.

You would also have to consider the fact that your cool fonts load after the text the first time the website is being loaded. Which mean you might see your default verdana font for half a second, something that will sound familiar to your ears if you have used sIFR in the past.


See the original version

Update
You can use @font-face with IE using oet format. Internet Explorer only supports TrueType fonts converted to EOT (Embedded OpenType). Also IE won’t accept a font that includes a format string in the src descriptor.

Like I said, not as ready as I would like

I would not recommend converting your fonts to opentype either. Not only it is “illegal” with most fonts, but all fonts I converted with two different software were being wrongly rendered, with inconsistent spacings using @font-face (but good in Photoshop), maybe I had bad luck with fonts software.

In conclusion, if you are thinking of ditching off your text replacement techniques in a hurry, I would test the hell out of it, or you could have a bad surprise like I did.

Ads

We offer professional testking 312-50 training for web designers and developers. Download the testking 642-359 videos and testking 642-681 study guides to learn web development at your pace.



25 comments

@font-face is a CSS feature, it is not part of HTML5.

What fonts are you testing with? .otf or .ttf? And where are those fonts from? If you’re using fonts taken from a Mac those should *not* be used on a public server, the license does not allow this. Hinting or the lack of hints will affect the way fonts render, *especially* on Windows XP with Cleartype disabled.

by John Daggett on July 21, 2009 at 2:08 pm. Reply #

“every major browser beside IE”

IE has has @font-face for a while. It just doesn’t support standard fonts. No biggie. Just another CSS hack.

by Emrikol on July 21, 2009 at 2:16 pm. Reply #

@John I am using otf, in a default xp environment, my bigest problem come from safari, everything is ugly,

Most fonts I use are free, but I used known fonts for this example.

by Cedric Dugas on July 21, 2009 at 2:20 pm. Reply #

@Cedric; Safari doesn’t work very well on Windows, it’s crippled in several ways. Safari on OS X has no problems with @font-face, as far as I know.

by Simon Sigurdhsson on July 22, 2009 at 5:33 am. Reply #

One method I’ve been using is to use the @font-face property which covers Safari and FF 3.5 and use conditional comments to use Cufon to replace fonts for all versions of IE.

by Daniel Marino on July 22, 2009 at 6:46 am. Reply #

Not working on my site … can you show us an example ?

by Bruno on July 22, 2009 at 7:50 am. Reply #

Not to sound like a hater, but I have a feeling that @font-face is going to be the Flash of the next decade. Some will use it beautifully, but I have a feeling most will abuse it, which will result in the same sort of stigma that follows Flash around to this day.

by Sean on July 22, 2009 at 10:49 am. Reply #

When I first tested @font-face, I had pretty much the same conclusion, some fonts were really looking weird.

In general, title of more than 20px were good in my case, the differences between browsers were small

by Mike on July 22, 2009 at 12:12 pm. Reply #

Just started messing around with @font-face myself on a site. Your images here are obviously all taken on XP which I found to be an issue. Safari on the Mac displayed my font beautifully but Windows XP was another story. Firefox uses the Windows default Cleartype which just unless the font is made for it makes things the stroke weight look anemic sizes smaller than 16pt or so—though for fonts that were made for it it’s gorgeous and at times better than OS X at small sizes. The windows version of Safari uses it’s own font rendering which is similar to OS X’s rendering engine but different enough that it doesn’t look quite right. Not sure on Opera but it seems to use it’s own rendering too.

by Colin on July 22, 2009 at 2:47 pm. Reply #

Safari 4 on Windows gives users several options (Preferences > Appearance > Font Smoothing). “Windows Standard” means “use the Windows system default” which in the case of Windows XP means no Cleartype, no subpixel antialiasing, go to jail, go directly to jail. Under the hood, Safari uses GDI when “Windows Standard” is set, a Windows port of the Mac OS X CoreGraphics library otherwise. Firefox 3.5 and Opera 10 Beta 2 will render with GDI.

If only CoreGraphics was open source the world would be a far nicer place…

by John Daggett on July 22, 2009 at 7:37 pm. Reply #

CSS3 @font-face is not as ready as you would think…

@font-face is one of the new CSS3 feature that has been implemented in every major browser beside IE, this is also the kind of stuff that can degrade really well in non compliant browsers…

by CSS Brigit | CSS3 @font-face is not as ready as you would think on July 23, 2009 at 5:32 pm. Reply #

[...] CSS3 @font-face is not as ready as you would think [...]

by Ultimate resources for learning HTML5 | blogfreakz.com on August 7, 2009 at 1:31 pm. Reply #

This really has nothing to do with @font-face, but everything to do with the font rendering system on Windows. The GDI font renderer on Windows handles TrueType and PostScript fonts through different means (unlike on OS X or Linux where it’s unified, this issue just doesn’t exist on those platforms), unfortunately one method (TrueType) can do sub-pixel and greyscale anti-aliasing, and the other (PostScript) can only do greyscale.

You can see this by installing an normal PostScript font on the system and using it in WordPad or such, even on Windows 7 with ClearType enabled, they render with Greyscale anti-aliasing.

Luckily Microsoft have made a couple of new font rendering API’s, neither of which suffer from this issue, the WPF font renderer and the new DirectWrite renderer (in Windows 7 and being backported to Vista I hear) handle TrueType and PostScript fonts exactly the same, they can do hinting, sub-pixel aa, etc. to the fonts, regardless of the underlying format. And it’s a higher quality rendering than GDI at the same time (It can anti-alias in X and Y directions, GDI only does X direction, so the tops and bottoms of characters look pixelated, large o, O and 0 characters show it the most)

by Alex on August 9, 2009 at 3:37 am. Reply #

[...] Check out original source [...]

by CSS3 @font-face is not as ready as you would think | CSS Luxury on August 10, 2009 at 7:48 am. Reply #

My college showed me that in Photoshop on Windows Microsoft own fonts look terrible as well, but in Photoshop you just apply a ’sharpen’-filter/-effect and the problem goes away. How about in modern browsers you use CSS-/SVG-effects to fix the fonts also ? Would that work ?

by Lennie on September 2, 2009 at 4:50 am. Reply #

There is no such thing in CSS, I am not really svg savvy, so I can’t say for sure. But Alex describe really well the problem, I think this problem will go away when windows 7 will have major share.

by Cedric Dugas on September 2, 2009 at 7:38 am. Reply #

Has anyone else seen Font Squirrel? http://www.fontsquirrel.com/

They have FREE fonts in kits that are usable straight away that will work very nicely on all modern browsers. Most work on IE6 too. Check it out if you want to see what can be done with legal fonts.

by Dooza on November 17, 2009 at 5:19 am. Reply #

In combination with fontsquirrel you may also want to check out the following, which addresses rendering issues in IE7/8

http://allcreatives.net/2009/12/05/smoother-font-face-embedding-in-ie-7-8/

by Mike on December 5, 2009 at 12:25 pm. Reply #

@font-face is CSS1, NOT CSS3!

by Ian Devlin on January 6, 2010 at 8:37 am. Reply #

Not really, IE implemented font-face, but the current implementation from every browser Are parts of the CSS3 spec.

by Cedric Dugas on January 6, 2010 at 9:16 am. Reply #

on my IE7 the font not show up ?? can you help me ??

by Ahmad Ali on March 3, 2010 at 1:58 am. Reply #

[...] er en artikkel fra position-absolute.com/ som tar for seg noen av de samme problemstillingene som jeg [...]

by Import av egne fonter i html 5 : stign.no on March 8, 2010 at 9:36 am. Reply #

[...] er en artikkel fra position-absolute.com som tar for seg noen av de samme problemstillingene som jeg [...]

by Fontlek med html5 og css3 : stign.no on March 8, 2010 at 11:14 am. Reply #

This is not an issue with @font-face. Truetype fonts need hinting to look good with Cleartype rendering — to look good with Greyscale rendering they need a LOT of hinting. Postscript fonts look crap in both situations. The reason you haven’t noticed this earlier is the core webfonts are all extensively hinted.

by Frode Helland on July 29, 2010 at 2:46 pm. Reply #

Leave your comment

Required.

Required. Not published.

If you have one.