Tuesday, October 6th, 2009

@font-face: How to embed it, and how it looks across browsers

Category: Typography

Zoltan Hawryluk has written a detailed in-depth post on @font-face.

Not only does he go into detail on using fonts via CSS:

  1. @font-face {
  2.     font-family: 'Droid Sans';
  3.     src: url('/shared/fonts/DroidSans/DroidSans.eot');
  4.     src: local('Droid Sans'),
  5.          local('Droid Sans'),
  6.          url('/shared/fonts/DroidSans/DroidSans.ttf') format('truetype');
  7. }
  9. /* Bold declaration only for non-IE browsers */
  10. @font-face {
  11.     font-family: 'Droid Sans';
  12.     src: local('Droid Sans Bold'),
  13.          local('Droid Sans-Bold'),
  14.          url('/shared/fonts/DroidSans/DroidSans-Bold.ttf') format('truetype');
  15.     font-weight: bold;
  16. }
  18. body {
  19.      font-family: "Droid Sans", "Arial", "Helvetica", sans-serif;
  20. }

… but he also goes into detail on how fonts are rendered in various browsers:


He opines:

  • Fonts displayed on Safari for Windows (and all browsers on the Mac) in my opinion look the nicest
  • I have found that Internet Explorer does a poor job when displaying fonts converted from OpenType
  • Firefox users first see the page without the embedded font until the font is loaded completely

Posted by Dion Almaer at 6:13 am

3.4 rating from 29 votes


Comments feed TrackBack URI

It may sound strange but however font-face remains one of the hidden part in CSS. I don’t think many of the web developers use it. This article comes right on time to start using font faces on the web sites.

Comment by stoimen — October 6, 2009

I’m using Linux on my computer at home and Vista at work, and I also notices a considerable difference on websites using font-face.
The pages rendered on the windows machine (with firefox or opera) look rubbish compared to the same browsers running on Linux.

Comment by rancho — October 6, 2009

I recently started experimenting with @font-face for a side project. I can to a similar conclusion. IE does an awful job of smoothing out the fonts even in IE8. And if you combine that with IE filters, they degrade even more. I had to scrap it all together. Perhaps my font wasn’t a good choice, but FF and Safari look fine.

Although I did find a site that really helped in converting the TTF to EOT.


That WEFT Microsoft tool to do the same thing is crap.

Comment by dgavey — October 6, 2009

I have been using @font-face more and more recently. EOT files look pretty bad in IE6, but they do render. Really, all fonts look bad in IE6. IE7 & IE8 display the fonts pretty decent, but that probably also depends on your OS.

If you’re looking to create EOT files, I have found that if you convert an OpenType to TTF (using http://onlinefontconverter.com/) and THEN to an EOT file (using http://www.kirsle.net/wizards/ttf2eot.cgi) the end result is really bad. But if you start with a TTF it works great.

I personally love the @font-face for a few reasons. First, this is the way the web is going, so you’re not working with a depreciating system. Second, no need to deal with JavaScript or Flash (although you do have to deal with converting fonts :)). And finally…your mark-up is 100% search engine compatible.

Comment by Jonny — October 6, 2009

If you really want to see a difference in display quality and readability, compare the rendering of Asian languages on a Mac or in Safari for Windows with Apple’s font smoothing turned on vs any other attempt by Windows to render the font. Even ClearType is useless, it does nothing at all for most fonts but in the best case it will only improve horizontal resolution while many Chinese characters are more complex vertically than horizontally.

Comment by okonomiyaki3000 — October 6, 2009

Leave a comment

You must be logged in to post a comment.