Over the last few months I have been following developments regarding the use of the @font-face feature of CSS3. As we have recently been involved in a project where I saw both an opportunity and a benefit to using @font-face, I have gathered together some information that I think helps clarify how best to use it.

Licencing and Support
Font licensing is a pretty big issue surrounding @font-face, even free fonts, which may stipulate that they are only used on non-commercial sites or have a link back to the author. Some new resources which offer a solution to the licensing issue are appearing, notably Typekit. As they put it its “Simple, bulletproof, standards compliant, accessible, and totally legal.”

At the moment @font-face is best supported by Firefox 3.5, Chrome 3, Safari 3.1, Opera 10 and IE8. The two most commonly used font formats you will see today are .otf (opentype) and .ttf (truetype). To embed a font using these formats you use the following css in your head or an external css file:

@font-face

{
font-family: 'Philosopher';
src: local('Philosopher'),
url("Philosopher.otf") format('opentype');
}

h2
{
font-family: ‘Philosopher’;
font-size: 20px;
}

You could argue that embedding specific fonts is superficial and that all it does is add to the overall aesthetic of the site rather that provide any benefit in terms of accessibility or usability. And if this is the case why bother trying to support older browsers? I guess that’s true but our job as web designers to at least try to provide the richest possible user experience to as many people as possible so why not give it a bash!

EOT (Embedded Opentype)
The font format supported by previous versions of IE is .eot (embedded opentype). You can add a line to your css to include this format with the others. To create the .eot version you first need a .ttf version of your font. If you have this I’ll explain how you you convert to .eot it in a minute but if you only have an .otf then you need to convert it to .ttf first. After a bit of digging I found a hard way and an easy way to do this. The harder way is to install Fontforge and the easy way is Online Font Convertor The Online Font Convertor works but seems to slightly distort some of the characters(at least when I tried it.)

Fontforge and Sygwin
If you want to install Fontforge on a windows machine you first need to install Sygwin which provides a Linux-like environment for Windows which is required to run Fontforge. I found it a bit tricky but this Installing Fontforge article is a good tutorial which explains exactly how to do this.

TTF to EOT
Once you have your .ttf font file you need to convert this to an .eot. Once again I found a few ways to do this. One is using the Microsoft tool WEFT. A lot of people have said WEFT is quite tricky to use but I found this tutorial and it wasn’t too bad. The only problem is that it doesn’t always play nice with every font. When you load in the font you wish to convert it will indicate whether or not it can be converted with a green, yellow or red icon. If it is green or yellow you’re in luck and you can create your .eot file. If it’s red (which I encountered) go to TTF2EOT Online. This tool is great and once it converts your font it even provides the css and instructions on how to embed the font in your page.

Once you have an .otf or a .ttf font aswell as your .eot version you can now embed the font using the following css:


@font-face
{
font-family: 'Philosopher';
src: url("Philosopher.eot");
src: local('Philosopher'),
url("Philosopher.otf") format('opentype');
}

h2
{
font-family: 'Philosopher';
font-size: 20px;
}


Early Chrome Support – SVG
You can improve browser support further by adding an SVG version of the font to the css. This format allows the embedded font to be viewed in Chrome 0.3+. This can be created again using Fontforge from one of your other formats or using a tool called Batik. I found good online tool created by Martin Saulis which he has built using Fontforge and TTF2EOT. The problem with SVG fonts is that they have a fairly large file size but by opening the font in any text editor you can delete the unnessessary characters from the font, greatly reducing the file size. The main elements to delete are the glyph-name=”null” and the hkern elements. By doing this it will reduce the file size with minimal effect to the font.

There are a couple of small issues that have to be considered once you have your SVG file. The SVG must be assigned an id which will be used in the css and html to reference it. This can be done by again opening the SVG file in a text editor and editing the tag and adding an id to it. Another issue is the requirement of an SVG namespace to the file. This also must be added for the font to work and can be added in the svg element in the file.

Bookmark This Post

Hide Sites