Posted by & filed under Web Development.

Since Firefox 3.5 and some version of Safari/Webkit released around 2007, both Firefox and Safari have supported embedding your own fonts into webpages for quite some time. Surprisingly, IE has supported this for quite some time too, although less surprisingly IE uses some weird non-conventional font format using a .eot file extension. In short, since font embedding is available in all major browsers and you can convert to Microsoft’s EOT format via the following instructions, font embedding is now considered fair game to developers!

Since Firefox 3.5 and some version of Safari/Webkit released around 2007, both Firefox and Safari have supported embedding your own fonts into webpages for quite some time. Surprisingly, IE has supported this for quite some time too, although less surprisingly IE uses some weird non-conventional font format using a .eot file extension. In short, since font embedding is available in all major browsers and you can convert to Microsoft’s EOT format via the following instructions, font embedding is now considered fair game to developers providing there are no legal issues with using the particular font (and I have no idea whether rights over font embedding are legally enforced and how this would be facilitated. It would seem to me to be a losing battle!)

To embed your own fonts, simply declare them in your CSS:

@font-face {
     font-family: "YourFont";
     src: url( /system/fonts/YourFont.eot ); /* IE */
     src: local("YourFont"), url( /system/fonts/YourFont.ttf ) format("truetype"); /* non-IE */
}

and call upon your font:

.someheadline {
     font-family:YourFont;
     font-size:24px;
}

The catch here is that getting certain fonts into their required .ttf and .eot formats can be tricky, especially with those Mac Suitcase font files. However, we have found some tools which work reliably for this purpose – we have yet to come across a font format that we couldn’t convert using these tools!

Converting to TTF

If you have the Postscript versions of these fonts available, all you need to convert these to TTF is FontForge. FontForge is an X11 based utility that can be compiled/installed under any Linux/Unix based OS, or Mac OS X. If you are using Mac OS X you will also need to install Apple’s X11 utility which you can download here (if you are using Snow Leopard version 2.3.4 is included with the OS and if not already installed should be available as an optional install from the DVD. The site we have linked to claims that version 2.4.1 will be available for download to Snow Leopard users as an upgrade from 2.3.4 at some point). If you are running OS X we suggest using MacPorts to compile this utility. With FontForge installed, to convert to TTF:

  1. fontforge /path/to/postscript/font/file
  2. file menu -> generate fonts, set the format to TrueType and save

If you don’t have the Postscript versions of these fonts and the file is a Mac suitcase, you will also need to compile Fondu in addition to FontForge. Fondu also runs on any Linux/OS based OS, and is also available through MacPorts under OS X. With Fondu installed:

fondu /path/to/mac/suitcase

With any luck, fondu will generate .pfb files. If it generates .bdf files, you might be out of luck, as these appear to be ugly and mostly useless. Both can be opened and then saved using FontForge and the above instructions.

Converting to EOT

There are some web-based tools for converting TTF files to EOT files, but if you want to do this yourself you will need to compile ttf2eot. This will run on Linux/Unix based OSes and is also available through MacPorts in OS X. With ttf2eot installed, to convert your font to EOT:

ttf2eot < yourfontfile.ttf > yourfontfile.eot

Upload your .ttf and .eot fonts, reference them in your CSS, and you are set!

If your font doesn’t show up correctly in IE, you might want to try an alternative font converter available here. This corrected a problem I had with a particular font.

  • joe

    Updated article to include URL to alternate ttf -> eot convertor

  • Pingback: Set custom font to CSS – Richard Choi

  • http://www.gettingcirrius.com Richard

    Thanks, the conversion information saved me on a project I’m currently working on.