Adding custom fonts to a website (downloadable fonts)

Adding custom fonts to website have been a big wish for many webdevelopers and webdesigners for a long time.

Today we have a range of about 10 websafe fonts to chose from. Thats not enough by far. We wan't more!

CSS2, which were made in 1998, have put in a way to embed fonts on a website. The @font-face tag. At that time Internet Explorer and Netscape implemented it in a bad way. They used their own font system, instead of the more used true-type.  Making the @font-face tag little used.

The @font-face tag is put in the background, and newer browsers didn't implement it with true-type fonts. There was a discution about copyright on fonts, since they would be downloadable. But i believe adding font support for browsers would sell even more fonts.

It wasn't until august 2007 we heard from the @font-face tag again. An article on A List Apart explain the use of @font-face.

2 month later, Safaris WebKit announces that they will support @font-face. I have not tested the Safari for this support yet. Not a big Safari fan.

But on 2. september 2008 Google made the Chrome browser, based on Safaris WebKit. So one of the first thing i test is the @font-face tag. But sadly it didn't work.

So all we have left is to hope that future browsers will implement this feature.

And until they do, we have some tools we can use, to add these fonts on website.

True Font Family
A technology that uses css, javascript and php to produce image headers with true-type fonts. Great because it only present the images for users who can see images, and not for screen readers and crawlers. The bad thing is you need php to make it work.

sIFR - Scalable Inman Flash Replacement
A technology that uses css, javascript and flash. Great because its client based, and webserver independent. Does require flash to embed your font or alternative the sIFR Font Embedder.

Both technologies support w3c standards, accessibility and search engine crawlers.

19-06-2009:

Cufón

This is by far the best tool to create custom fonts. I have personaly used it on a big project, with huge succes. It used swg for IE and canvas for the rest of the browsers. So it only requires javascript. It's fast and pretty stable. Has a good community, with the developer answering questions very quick.

Leave a Reply