Fonts on the internet


1 December 2011, by

It used to be that if you wanted to use an unusual font on a website you had three choices:

  • Somehow ensure that all your users have the font. Not many exciting fonts are on all Mac and Windows systems by default, plus you would also have to hope that Linux users will have a similar enough font that the site still looked reasonable to them. In an internal corporate site you may have more control over the client machines, but that’s only likely to be worthwhile in a very limited number of cases.
  • Generate an image of the text you want in the font you want to use – this works great until you want to copy and paste the text, or read it automatically to a visually impaired user. Plus, it’s a bit of pain generating and updating all those images.
  • Use Flash, which can embed fonts and give you very fine control of text display. However, this can cause new issues, especially if you don’t have any Flash experience and just want to put up a simple site.

Then along came some clever solutions like sIFR – which automates the third option above, and cufon – which tries to do the same thing as sIFR but using JavaScript instead of Flash. These solve some of the problem by making the resulting pages more friendly to screen readers and similar devices. The cost of this however is a lot of complicated moving parts that will probably stop working if the user has Flash or JavaScript disabled.

Now finally, in CSS3 this situation is being addressed with the introduction of the @font-face attribute. Using @font-face will delegate the displaying of text in your shiny new font to the browser. This makes using different fonts simpler and more reliable in browsers that support it, and will not break anything in older browsers that don’t.

A simple @font-face declaration gives the font a name within the CSS and a location to download the font from (this might be from your server or a third party), like this:

@font-face
{
  font-family: 'Limelight';
  src: url('limelight.woff');
}

That declaration then lets us write normal CSS that uses the new font, like so:

.specialText
{
  font-family: 'Limelight', Arial, Helvetica, sans-serif;
}

Of course it wouldn’t be a proper web browser story if there weren’t some incompatibilities to work around. In this case, you will need to provide your font in 2 to 4 formats depending on the number of browsers you want to support, and if you want to support older versions of IE you need to get a bit tricky with the CSS too (for full details of this and font formats compatibility, see the link below). Finally, don’t forget that a lot of fonts are not free to distribute in this way, so make sure you’re using a freely licensed font, or have paid your font designer for the relevant license.

There are more gory details of compatibility and licensing issues, and some of the attempts to resolve them on the HTML5 Rocks site, if this article has whetted your appetite please take a look at their web fonts tutorial for more information.

Tags: , ,

Categories: Technical

«
»

Leave a Reply

* Mandatory fields


× one = 4

Submit Comment