Corrosive Online

Font-Face Font Embedding

A great frustration for web designers is not being able to use the fonts they really want to for websites. It is possible to use images for headers as I have explained in a previous tutorial. What would be really cool though is to be able to use your own fonts for a whole site without any image replacement techniques or the danger that Search Engines will not read any HTML text in your website at all! Sadly though, up until now web designers have had to stick to a very limited number of 'web-safe' fonts. There are some good reasons for limited 'web-safe' fonts;

1. Availability; you can specify pretty much any fornt you want in your CSS font-family attributes but, if the person viewing the website doesn't have your chosen font downloaded on their machine, they won't see it. This is where the concept of 'web-safe' fonts comes from
2. Copyright; many fonts have to be paid for so Browser manufacturers have been hesitant to 'help' designers break copyright law
3. Readability; on grounds of 'good taste' I would discourage the use of wild and whacky fonts for a large body of text. Font choice can easily affect how readable a page is

Now though...we can use the @font-face CSS3 property to call pretty much any font we like and use it in a design! I am hesitant to bring this concept to the table as support is extremely limited for @font-face. Out of the Browser collection I have on my machine @font-face is currently supported by only Firefox 3.5 and Opera 10 (beta). This is a shame but I am sure that support will grow.

So, I guess you'd like to know how the magic happens? Of course you would and it gives me a chance to use some of my favourite 'rock band' fonts. The concept behind it is to 'call' a .ttf or .otf font from a folder in your website structure (in my case a folder called 'fonts') and then instruct the viewer's Browser to display the font. Here is a sample of the code needed;

@font-face {
font-family: maiden;
src: url(fonts/METALORD.ttf);
}

Once we apply the 'font-family: maiden;' to the text in the div below we can see the classic 'Iron Maiden' logo;

Here is the code for the 'Misfits' logo;

@font-face {
font-family: misfits;
src: url(fonts/MISFITS_.ttf);
}
#misfits {
font-family: misfits, Verdana;
}

And here is the resulting logo;

Here is the code for the 'Slipknot' logo;

@font-face {
font-family: slipknot;
src: url(fonts/Sickness.ttf);
}
#slipknot {
font-family: slipknot, Verdana;
}

And here is the resulting logo;

For those of you who don't have a Browser that supports the @font-face property then I have included a screenshot of this page displayed on Firefox 3.5. Click on the thumbnail below to view a larger image;

• 

Once again we have another example of CSS3 just freeing up the designer's hands a little more. These kind of developments with CSS3 are very exciting for me as it means that I can spend more time designing and less time struggling with layouts and images to display the fonts that I need.

Advertisements If you would like to advertise on Corrosive Online then get in touch through my Contact Page for details. If you have found anything on this site useful or entertaining or you have enjoyed one of my Online Web Design Lessons then I would love you to make a donation. Use the Paypal button below to make a donation.