PM Photo & Computer Services
Web Site Design and Business Products

Return to Problems & Solutions index page

What a great thing it would be to be able to add our favorite fonts to our web pages. Well apparently in some instances, we can.

HOWEVER ... before digging out your font and including it on your site there are three important things to consider.

1. As of this date, neither IE8 or IE9 beta seem to support the @font style. The latest versions of FireFox, Safari, Opera, and Chrome seem to handle the @font style very well.

 

2. Using embedded fonts requires that the font be downloaded as the web page loads. Just like an image, this can slow down the page considerably if too many fonts are called for.

3. The copyright of the font is the most important aspect of including special font on a page.

To use the @font style, the font needs to be stored on the hosting server which makes it available for others, who know how to download the font. Just like music and videos, many fonts are protected under copyright laws and are not allowed to be shared free of charge.

When using the @font, be sure that the alternative fonts you choose are close to the same size as the one you are embedding. In the examples here I purposely chose substitutes that did not work well. I choose Arial as a substitute for "Playbill" and as you can see, 60px Arial is much larger than 60px Playbill. In the real world, if there were a lot of text in Playbill and Arial was substituted the page layout would be drastically altered.

Go to the link, copy the URL and try it in your browser to see if it supports the @font style http://www.pmphoto.us/test/font_embed_test_page.htm

.

The Stylesheet Code:

@font-face {
font-family: "Tiffany-Heavy-Italic";
src: url('http://www.yourwebsite.com/tifanyhi.ttf');
}

@font-face {
font-family: "Playbill";
src: url('http://www.yourwebsite.com/playbiln.ttf');
}
.tiffany {
font: 36px "Tiffany-Heavy-Italic", "Times New Roman", Times, serif;
}

.playbill {
font: 60px "Playbill", "Arial", sans-serif;
}