Edinburgh Web Development

Real fonts come to the web?

by Iain Wilson

17 May 2010

One of the most enduring complaints about website design is the limited number of fonts available to designers. Now this may be about to change with a little help from Google.

Traditionally, when a web page shows text on a page, the HTML defines what font should be used. This works fine so long as the font is loaded on the PC/Mac that is showing the page.

Unfortunately, PCs and Macs are only loaded with relatively few common fonts by default which is why so many sites use Arial, Verdana or Tahoma (and web Helvetica because of Macs, but that's another story).

Otherwise, to use a uncommon font, you had to create a static image file containing the text 'picture'. It now looks like this is about to change.

Introducing font-face

As the HTML5 and CSS3 versions gain momentum, wrapped up in that is something from the CSS2 specification that has now been adopted by the latest versions of the major browsers - @font-face.

This is Reenie Beanie live text - it isn't ARIAL!

The text you can view above comes from a font, which is not on your PC/Mac. If you can't see it or it's in Arial, your browser is out of date.

Thing is, it's like any ordinary text - not an image. You can select, copy and paste it. The @font-face descriptor allows a webdesigner to specify any font for a webpage and load the font from the webserver. Once loaded, the font is useable by anyone viewing the page.

Sounds great, doesn't it? You can use any font you like and anyone viewing the page will see it correctly. Well, technically that's true, but the giant hurdle in this is a classic business show-stopper - licensing.

You see, when you bought that beautiful font, its license was for use on your PC or Mac, NOT to be used by the whole world wide web, and the font companies don't want to be losing out on license royalties.

How do you fix a problem like that? You need a company to buy the licenses of the fonts, then provide a way for the general developer public to use them.

Google Fonts

Enter Google. The search giant have introduced the Google font API which, with one line of code, allows developers to load their fonts into any page, free from any licensing constraints (and also handles an Internet Explorer anomaly).

Initially, there are 18 fonts in the directory, but hopefully this will continue to increase and who knows, change the (font)face of the web.

Liked this article? Please share it with your friends and colleagues.

comments powered by Disqus
Blot Design,
10 Colinton Road, Edinburgh, EH10 5DT
Terms, Cookies & Privacy