Enhance Your Website With Cool Fonts

Feeds

Monday, 23rd May 2011

A while back I wrote a brief article on the beta release of Google Font Directory, which I followed with an update about how they had added fonts and documentation. Well, this post is also about enhancing your website with fonts, but in a slightly different way.

You will have noticed that, as usual, I have already taken my own advice and have selected the QuicksandBook font for my headings - a wonderfully simple font that I think looks great. So with that in mind, here is how I've done it (inspired by Rachel Andrew's presentation at Tech Days).

Select A Font

The first stage is to visit Font Squirrel and browse the awesome pages of free fonts. Once you've selected the font that best fits your design needs, download the "@font-face Kit". This kit includes the font in several formats (to work on the widest range of machines) and an example CSS file, which demonstrate how to use the font.

Add It To Your CSS

Here is the CSS I am now using to display Quicksand Book on my website...

@font-face {
    font-family: 'QuicksandBook';
    src: url('Quicksand_Book-webfont.eot');
    src: url('Quicksand_Book-webfont.eot?#iefix') format('embedded-opentype'),
         url('Quicksand_Book-webfont.woff') format('woff'),
         url('Quicksand_Book-webfont.ttf') format('truetype'),
         url('Quicksand_Book-webfont.svg#QuicksandBook') format('svg');
    font-weight: normal;
    font-style: normal;
}</p><p>h1 {
    font-family: 'QuicksandBook', sans-serif;
}

For brevity, I've reduced the font-stack, but you will need to make sure that your alternate font works for your design and doesn't look too different in size and appearance from your cool web font.

If you use all of the formats supplied in the kit, you will have support for all of these browsers: Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+, Internet Explorer 4+, iPad and iPhone.

Personally, I think this is a great way of adding some individual style to your headings, but take care when using a custom font for your body text as they can often be less readable than the standard fonts.