Embedded Fonts for Firefox and IE 6

July 17, 2009 by Noah
One of Firefox 3.5's new features includes support for the @font-face attribute of CSS 3, which allows you to embed a TrueType Font file on a web page, so that the user will see the font on your page even if they don't have the font installed on their computer.

This feature has been possible in Internet Explorer since version 4.0, but IE uses a variant of OpenType Font instead of TrueType. IE was the only browser to support such a thing for a long time, so it never really caught on.

Now that Firefox and other CSS3-supporting browsers are implementing @font-face for TTF, we can combine that feature with IE's support for EOT font files and get embeddable fonts to work on both browsers.

I have a demonstration here: Embedded Font Test. This page embeds my Rive font, which is available (in TTF form) from my Fonts page.

Rive Font

To convert TTF to EOT files, you can use Microsoft's WEFT tool which has been around since the dark ages, but I much prefer ttf2eot, hosted at Google Code. This is a no-nonsense tool that gets straight to the point of converting a font file without the hassle of dialogs that must be clicked through with WEFT. Oh, and there's conveniently a Windows executable already built, just grab it from the Downloads page.

Usage is pretty straightforward:

ttf2eot < Rive.ttf > Rive.eot
And then embedding the pair of fonts on a page that is compatible with both IE 6 and Firefox 3.5 (and I imagine other CSS3-compliant browsers, though I haven't tested them):
@font-face {
font-family: Rive;
src: url("Rive.eot") /* For IE 6+ */
@font-face {
font-family: Rive;
src: url("Rive.ttf") /* For CSS3 browsers inc. Firefox */
body {
background-color: #000000;
color: #FF9900;
font-family: Rive;
font-size: 16pt
IE 6 knows to ignore the TTF entry, and Firefox knows to ignore the EOT entry, as each browser can't display the opposite type of font.


There are 12 comments on this page. Add yours.

Avatar image
Nimmy posted on August 10, 2009 @ 05:03 UTC

Hi... This is informative, but i want to embed a Geogtq-Md.otf font. How can i do this?

Avatar image
hayden posted on December 7, 2009 @ 12:22 UTC otf > ttf

then ttf > oet

Avatar image
Noah (@kirsle) posted on December 7, 2009 @ 17:49 UTC


The ttf2eot program has a little trouble when converting a TTF that was previously converted from OTF. There's a bug ticket on Google Code about it.

Avatar image
Tom posted on February 2, 2010 @ 09:09 UTC

thnx for the good tutorial. very good job

Avatar image
Koko posted on April 26, 2010 @ 19:33 UTC

great work kirsle, thank you for the knowhow!

Avatar image
Eduardo posted on April 28, 2010 @ 01:30 UTC

thanks for the nice tutorial! but do you know a solution for firefox 3.0?

Avatar image
Siddhesh posted on July 4, 2010 @ 10:47 UTC

Thnx great work,

but can i specify url of uploaded font in src.

Avatar image
Jor posted on March 28, 2011 @ 14:46 UTC

i'm the beginer , and want to ask Where can I embed thins font-face on my HTML? Thanks you!! I like your websie

Avatar image
Noah (@kirsle) posted on March 28, 2011 @ 22:40 UTC

In the area of your page, you'll either link to an external CSS file or include your CSS in-line.


See also:

Avatar image
rafal posted on June 13, 2011 @ 23:04 UTC

thanks! Is the glowing font on this page made the same

Avatar image
Noah (@kirsle) posted on June 14, 2011 @ 00:29 UTC

The glowing font is done via the CSS text-shadow property.

Avatar image
Sandeep posted on January 6, 2013 @ 06:12 UTC

Thanks pal.

Add a Comment

Used for your Gravatar and optional thread subscription. Privacy policy.
You may format your message using GitHub Flavored Markdown syntax.