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.

I have come across quite a lot of articles recently discussing including custom fonts in web pages. With typography playing such a key role in design, it continues to be one of the major restrictions designers face when designing for the web. When the web world wide web first began the focus was on hyperlinking and allowing access to other documents but considering how far the web has come today and all that is possible, font embedding seems like a basic idea. The biggest underlying issue seems to be managing the distribution of copyrighted fonts. Sifr offers a very useful solution to the issue for the time being, allowing font replacement through the use of Flash. It is accessible across browsers and the text can be selected on the page though some minor drawbacks have been highlighted. Some of these are:

- The inability to alter kerning of the characters.

- Flash has often been criticised for its poor anti-aliasing and this can sometimes show on the rendered text.

- Sifr can be tricky to setup and get working correctly.

- Sifr fonts cannot be scaled when you change the size of font in the browser. It only changes when the page is reloaded. Some consider this quite a serious usability problem, though because Sifr is mostly used on headers and large areas of text that probably wont require scaling, this is debatable.

- It requires the user to have Flash though nowadays almost 95% of web users have this.

A convincing alternative to Sifr which I came across recently is Cufon developed by Simo Kinnunen . The aim of Cufon was to achieve the same effect as Sifr without the need for additional software. Some specific requirements were set out when it was being developed. These were:

- No plug-ins required – The font should be able to be displayed without flash and using only the users standard browser. Cufon uses javascript to render the font.

- Compatibility – It had to work on all browsers. This has been achieved with Cufon displaying correctly on IE6, IE7, IE8, Firefox and Safari.

- Ease of use – configuration and setup for Cufon is minimal compared to Sifr.

- Cufon loads faster than Sifr with no flickering, even for larger areas of type.

Cufon works as an interface to Fontforge so it creates an SVG font based on the source font, converts it to VML(as IE only supports this), then is rendered using an engine written in javascript. The rendering engine outputs two versions of the font, one in VML shapes and one using the new HTML5 canvas tag. The font can be loaded into the file easily using the normal <script> tag. The font compresses well also for a minimal file size. The advantages are convincing, however little study has yet been done on accessibility of Cufon and scaling etc yet. Also until the issue of distributing copyrighted fonts is resolved it could be a while till custom fonts become common practice.

http://cufon.shoqolate.com/generate/