Solving the font issue for Web designers

If you’re like me, then you are probably sick of being forced to use background images for headers that use a non-generic font. How much time is wasted in slicing these images, let alone all the extra rules that need to be created for them in the style sheet.

There are a few options out there, but none of them – that  have seen anyways – are what I’m looking for. That being said, there are some interesting developments taking place in this area and hopefully we should have a workable solution to this problem. However, for now we’re stuck using background images or JavaScript-based methods for displaying non-standard fonts.

Is there any other way we can do this? You may be surprised at the support that there is (in CSS) for displaying non-standard fonts – even in Internet Explorer (supported since 2005, if you can believe).

Below is just a quick synopsis of my findings. Hopefully you will benefit from this and will be able to use it in your future projects, just as I intend to do.

Internet Explorer

The first step is to convert font into a format that can be used on the Web with Internet Explorer. Microsoft provides a tool called the Web Embedding Fonts Tool which will do the conversion process for you.

This tool is old and a bit clumsy to use, to say the least. However, it will get the job done and that’s all that really matters, right? Following the steps below will make your life a lot easier though.

Within WEFT, go to Tools > Fonts To Embed.

From here you can add in all the fonts you would like to create in a format (EOT) that is usable by Internet Explorer. In the example above, I’ve added in “Cooper Black”. When adding in fonts, the tool will attempt to determine what the usage rights are for that particular font. As you may well be aware of, their are certain licensing restrictions on most fonts, particularly with the TTF format. In my case, the tool was unable to determine if it’s ok to convert the Cooper Black font. For any production work, it is imperative that you verify the licensing agreement for the font to ensure that there are no issues with using it as “open source”.

Since this is just a demo and also the fact that I’m to lazy to check, I’ll just grab another font that allows me to use it in an open format.

The font I chose is called “Quicksand” and can be downloaded from Font Squirrel. This font is in the OTF (Open Type Font) format.

This is where things get annoying. WEFT does not support OTF, so what needs to be done is to convert the font into TTF. I did not do a whole lot of research on this, but from what I saw there are tools out there that do this, specifically FontForge. To save time, I used an online tool which did the trick.

Now that the font was converted into an acceptable format, I was able to add it to the list (see the screenshot above) without any problem.

The final step (seriously) is to create the EOT file that Internet Explorer will use when rendering the font on the Web. A couple of things to make note of:

1. The EOT will only render properly if it is accessed from a page at or under the domain you sent (see the bottom textbox in the screenshot below).
2. Keeping this in mind, you will need to create a version for each server, whether it be development, staging or production.

Create the EOT file (see screenshot above) by clicking Tools > Create Font Objects.

Once the EOT file is created, all that remains is to reference it from the style sheet and then we should be good to go!

/* IE6/7/8 - Must be first */
@font-face {
font-family: Quicksand Bold;
font-style:  normal;
font-weight: normal;
src: url(http://www.apluswebcreations.com/Quicksand_Bold.eot);
}

Non-IE browsers, including Safari, Firefox and Opera

Now for the rest of the gang. To no ones surprise, the process is much easier and requires no offline tools to convert the fonts. As long as the browser supports the CSS3 @font-face selector, it will work properly.

/* FFx3.5/Safari/Op10 - Next */
@font-face {
font-family: Quicksand Bold;
src: 	local('Quicksand Bold'),
url(http://www.apluswebcreations.com/Quicksand_Bold.otf) format('opentype');
}

A few things to take note of, based on the CSS snippet above:

1. This only works for new browsers – Opera 10, Firefox 3.1, Safari 3+ – and not on any version of IE or Chrome, although I presume that support (for Chrome) will be coming soon.
2. The src rule allows you to define multiple sources of the font for testing purposes, so you can have the location of the font on your local machine along with the location of the font on the production server.

References

Thanks to the work of STK (Scott Thomas Kimler) who provided invaluable tips for the usage of WEFT.