@font-face Coming to a browser near you
It’s been a long suat after feature of countless web developers and designers a like. In the upcoming Firefox 3.1, this fancy web feature will return to the web. There is one catch, the new browsers Safari and Firefox only work with truetype and opentype fonts, while existing IE supports embedded open type since 4.0. This means you still have to go through some pain to get the fonts working in IE. In IE 6 the font rendering is pretty bad as well, so don’t expect your fonts to be rendered clearly – they’ll be jagged looking.
Here I have taken screen shots of the embedded fonts rendering in IE 6, Safari 3.1, and Firefox 3.1 beta 2:
Internet Explorer 6, with embedded .eot font faces
Safari 3.1, with truetype .ttf font faces
Firefox 3.1 beta 2, with truetype .ttf font faces
Safari and Firefox look identical, and IE 6 looks a little broken. I haven’t checked in IE 7, but it does have improved font rendering so, I imagine the fonts will look better. Also, I have not tried in Google Chrome to see if they are using a new enough version of webkit to support the @font-face rule.
In order to have all three browsers rendering the new font, you will need to use a few tricks to get IE to choose it’s .eot font instead of the .ttf font.
<head>
...
<style type="text/css">
@font-face {
font-family: "Delicious-Roman";
src: url(/fonts/Delicious-Roman.otf) format("opentype");
}
@font-face {
font-family: "Old Standard TT Regular";
src: url(/fonts/OldStandard-Regular.ttf) format("truetype");
}
h1 { font-family: "Delicious-Roman", sans-serif }
h2 { font-family: "Old Standard TT Regular", sans-serif }
h3 { font-family: "Delicious-Roman", sans-serif }
</style>
<!--[if IE]>
<style type="text/css">
@font-face {
font-family: "Delicious-Roman";
src: url(/fonts/DELICIO0.eot);
}
@font-face {
font-family: "Old Standard TT Regular";
src: url(/fonts/OLDSTAN0.eot);
}
</style>
<![endif]-->
</head>
Here’s a link to a demo page with the fonts embedded. Try it out in IE and Safari or if you have Firefox 3.1; Try it.
I use a custom font on my blog, and I have some more findings that you may be interested in. Chrome does not support @font-face at all – I am not sure why since it is using the same layout engine as Safari.
Safari tends to render fonts with a lot more weight than Firefox – a lot of custom fonts tend to look skinny and unattractive in Firefox. Professionally designed fonts with proper hinting look fine in both.
EOT is a pox on mankind – the sooner Microsoft stops trying to peddle that idiotic format the better.
The good news is that in a few months the majority of browsers (Safari, Opera and Firefox) will all have mainstream @font-face support.
Andrews last blog post..A Better Handwriting Font with YourFonts.com
That was not a fair test. I presume you obtained the IE6 results on a Windows platform (WinXP?) and others on Mac/Linux platfrom, am I right?
The reason of the font being “jagged looking” is not down to the browser itself, however, it’s because of the OS. If you have got the right settings at Control Panel (turning on the ClearType feature), you will see that the problem is solved. IE6 is actually able to display text in antialias manner in fact.
You are not the first one I have seen mistakenly blaming the problem on IE, but I just want to emphasize this is Windows’ default setting, not because of the handicapped IE6.