Web Fonts Simplified
Design and Typography go hand in hand. But every time I’ve looked at using specific fonts with my web pages, it seemed confusing and difficult to get working. So many web page designers simply give up and wind up using text in the background images. There are a few problems with this approach, including accessibility and page content sematic issues. Sometimes pixel level control of the page rendering is necessary, but other times we want the browser and user to control the layout and display of text.
Browser Support
In this post I will briefly discuss web font support in browsers historically and today, the kinds of fonts used and how to work with them and how to consume them in the page markup.
Microsoft added embedded font support in first version of Internet Explorer with the FONT FACE tag in 1995, with versions 3, 4 and 5 adding support for CSS. Unfortunately, this support required the end user to have the requested font installed on their system. Microsoft eventually provided the WEFT tool to allow authors to embed fonts into their pages, allowing the user to view the page correctly without having the font installed.
The font format supported by Internet Explorer is the Embedded Open Type (EOT) file format, which never caught on with any of the other browsers. All the other browsers that I have checked (including the latest versions of Firefox, Chrome, Opera and Safari) all support the TrueType (TTF) font format.
Converting fonts
Since most of the fonts I’ve used on Windows are True Type fonts, and in order them to be used in Internet Explorer they have to be made available to users in the EOT format.
Microsoft has historically provided the Web Embedding Fonts Tool (WEFT) tool to help web page authors generate EOT. This is a full GUI that will scan the site and identify all characters from the site that the font will need to include and encodes those characters only and packages them into a EOT font format that can be uploaded to the server. I have used this tool and it’s not easy or intuitive and didn’t handle the font I was using.
As an alternative, I have found an open source command-line utility ttf2eot (licensed under the GNU GPL v2) which has a Windows version that is available for download. This utility was originally developed for Unix systems so is a little different to use that typical Windows program. It takes the font to convert as the input stream and writes the converted font to the output stream. This just means that you run the command from the windows command line like this:
TTF2EOT < MyFont.ttf > MyFont.eot
Using CSS @font-face
Now that the font is available in both of the formats needed by the browsers, the page now needs to reference the font and consume it in markup.
The CSS code to allow all browsers to display the embedded font correctly is relatively simple. All that needs to be done is to include the @font-face declarations is the correct order so that all the browsers can pick up the appropriate font information.
<style type="text/css">
@font-face { font-family: "Alien"; src: url(ElementalEnd.eot); }
@font-face { font-family: "Alien"; src: url(ElementalEnd.ttf); }
</style>
Once the font-face has been declared it can now be consumed just like any other built in font.
<html>
<head>
<style type="text/css">
h1 { font-family: "Alien"; }
</style>
</head>
<body>
<h1>My UFO Research Site</h1>
</body>
</html>
That’s all there is to it! Just make the font available in both formats and reference them both in correct order and you can style your page with them.
Licensing Considerations
Remember, you should only host and embed fonts for which you have the appropriate software licenses.