When a computer displays text, it uses fonts to display different styles of typeface. There are standard fonts such as Arial and Verdana, however, there are huge lists of fonts available to web developers and designers which don’t come pre-installed onto your computer, these are non-standard fonts.
If you looked at a website that had one of these non-standard fonts, and the font was not already on your computer, it is quite possible the text would refer back to a default font (Arial) meaning the site would not be displayed in the way the designer wanted it to be received.
So what can a designer do to ensure all users see the site in the way they intended? Where there was once limited flexibility, there are now many options to implementing these non-standard fonts.
Google Web Fonts API
There is an extensive list of fonts to be found at google.com/webfonts and implementing the font has been made easy.
Upon choosing the font you are given a line of code to be placed on the site, then all that is needed is to add the name of the font to the font-family attribute in the CSS, in the same way that you would for a standard font.
The advantage to using the Google API over others is in the speed at which content is delivered to the end user, making for a better user experience, but at the same time the designer is only limited to the fonts hosted on the CDN.
Instead of using a content delivery network to host the fonts, it is possible to dost them on the same server as your website. This process uses the CSS3 attribute @font-face, this can then be linked to within the font-family attribute to specify which ids, classes and tags are going to use the font.
The trouble with using this technique, is that for the font to render correctly in all the different browsers, the @font-face attribute needs to link to four different file types, this can limit the choice of fonts, but sites such as fontsquirrel.com/fontface have a huge collection of already packaged fonts.
This techniques is fairly new, but as more people start to realise the benefits of having these lightweight fonts in the CSS, more and more fonts will start to have all four types. What would have been better is if all browsers used the same file type in the first place.
About the author
Andy works on behalf of Solopress Printing Services, a company that specialise in creating top quality business cards. He appreciates sites with great typography and relates this to printing in the physical world.