Archive

Posts Tagged ‘font-face’

@font-face Coming to a browser near you

December 17th, 2008
2 comments

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.

Software ,