7th July 2012

Webfonts – how to use them

Webfonts have been around for a very long time, but the support for them across multiple browsers has been poor, mainly with Internet Explorer. The problem that this has caused designers and developers alike is that they have been restricted to what fonts a user has installed on their computers, for example Arial, Helvetica and Times New Roman.
Now that web development and technologies are moving at lightening pace, there have been many different techniques created to try and include custom fonts in websites. The main 3 techniques are CSS3, Javascript Plugin or Flash Plugin, I will discuss the CSS3 technique below.

The CSS3 Technique

Although still in its infancy and not widely supported yet, this is definitely the easiest and most appropriate way to include fonts. With CSS3 and HTML5 soon to be the standard framework across browsers, it makes sense that you should familiarise yourself with this technique.
To use this technique is very simple, it only requires a few lines of CSS:
@font-face {font-family: Meta; src: url(‘fonts/meta.otf’); }
The above bit of CSS is to define a new font, so the ‘font-family’ part is the name of your new font, which you could call anything, such as ‘My New Font’, and the ‘src’ tag is to tell the browser where this font is located. I like to put mine in a fonts folder to keep things nice and tidy.
The next step is to include the font in your titles, body text or any other place you’d like to use it, this can be done with the following bit of code:
h1 {font-family: Meta, Arial, Helvetica, sans-serif}
Once you’ve included the font with ‘@font-face’ all you need to do is call it like you would any other font.
Although this is the way that you should include webfonts, it is understandable when developers use other methods such as the Javascript and Flash methods so that they can combat cross browser issues. To combat cross browser issues when using webfonts, it is advisable to provide different formats of the same font so that there is a font type that will work with most browsers.

The other methods

Here is a list of some Javascript and Flash methods available:

Where can I get free websafe fonts?

The best way to create designs for websites is to look at what fonts are available to you that have been tried and tested, so that you know they will work with most modern browsers. Below is a list of resources where you can download free fonts and include them in your designs and sites:

Further Reading