Web fonts with @font-face

When the web first started everything was in Times New Roman, black on grey with few images.

Things have moved on a long way since then, but there are still very few fonts. I've worked on many sites that have tried to overcome this by various routes.

  • Creating an image of headline text in the desired font
    This can look good but offers poor accessibility and it's hard to update
  • SiFR - uses JavaScript and flash to add fonts
    It can work well - but performs badly if overused, and can cause problems with z-ordering on some systems
  • @font-face Part of the CSS standard which allows you to provide font files for download.

@font-face has a great deal of potential as the end users browser automatically downloads the font definition and renders whatever font you specify without any plug-ins or even JavaScript required.

However, this is actually quite old technology - I tried to use it back in the days of Internet Explorer 5 and Netscape Navigator.

Then as now there were competing standards for downloadable font files.

At the time both browsers only offered a web specific font format which didn't look good enough to use.

However; Firefox 3.5 and Safari 4 now support regular TTF and OTF fonts and these look great.

There is still the problem that most good fonts are supplied under license - which prevents you providing them for download.

But with two major browsers providing a good implementation for standard font file we can hope that it won't be too much longer before the problem is solved.

Tags

Post new comment

Got something to add - just enter a comment
all other fields are optional.

Your email address will not be published.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Image CAPTCHA
Enter the characters shown in the image without spaces, also respect upper and lower case.