My favorites | Sign in
Project Logo
                
Search
for
Updated Apr 30, 2009 by taviso
Labels: Featured, Phase-Deploy
Demo  
Simple ttf2eot Example

Introduction

Simple demonstration of ttf2eot usage.

Details

First create the output file

$ ttf2eot < input.ttf > output.eot

If that worked, you can specify the file in your CSS.

<style>
@font-face { 
    font-family: "testing";
    src: url("output.eot");
}
</style>
<div style="font-family: testing">
Hello, World!
</div>

Only IE understands this format, other browsers (Safari 3.x, Firefox 3.1.x, Chrome 2.x) are likely to adopt src: url("foo.ttf") format("truetype") instead.

You can use conditional comments to specify both formats, simply provide the font in both EOT and TTF format, then use conditional comments to make IE see the EOT version.

<style>
@font-face { 
    font-family: "testing";
    src: url("output.ttf") format("truetype");
}
</style>
<!--[if IE]>
    <style>
    @font-face { 
        font-family: "testing";
        src: url("output.eot");
    }
    </style>
<![endif]-->
<div style="font-family: testing">
Hello, Multiple Browser World!
</div>

This should work in IE6, IE7, IE8, Safari 3/4 and Firefox 3.1+

Note for Windows Users

If you're a Windows user - this is probably not what you're looking for.

You will probably feel more comfortable using "WEFT", Microsoft's own utility for handling EOT. ttf2eot is primarily for UNIX users who want to make font embedding work for IE without using Microsoft software.

However, if you're certain you do wish to use ttf2eot, a command line windows binary is provided. It is used like so:

C:\>ttf2eot.exe c:\windows\fonts\arial.ttf c:\output.eot

C:\>dir output.eot
 Volume in drive C has no label.
 Volume Serial Number is E4EC-5386

 Directory of C:\

30/04/2009  21:41           367,270 output.eot
               1 File(s)        367,270 bytes
               0 Dir(s)  51,782,295,552 bytes free

C:\>

Please note, It is unlikely the author will be able to help with Windows related questions.


Comment by hober0, Jul 06, 2009

@font-face's src property takes a comma-separated list of sources, so I don't think you need to resort to conditional comments in this case. Try the following instead:

    @font-face {
        font-family: "testing";
        src: url("output.eot"),
             url("output.ttf") format("truetype");
    }
Comment by chris.sirhc, Jul 08, 2009

Unfortunately, IE (6 and 8 tested) doesn't seem to honour the list of sources. I did my own testing just now (involving lots of frustration).

It doesn't work regardless of the order of the sources. So, it's back to conditional comments. :(

Comment by chris.sirhc, Jul 08, 2009

IE will ignore font-face declarations with any format() hints:

http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/

Comment by impallari, Jul 17, 2009

Just make 2 font face declarations, like this:

@font-face{
	font-family: 'MuseoSans500'; 
	src: url('MuseoSans500.eot');
}
@font-face{
	font-family: 'MuseoSans500'; 
	src: url('MuseoSans_500.otf') format('opentype');
}

Im doing it this way on my site and works like charm. Have a look: www.pabloimpallari.com.ar

Comment by siryillb, Jul 28, 2009

Thanks so much for this. Microsoft's WEFT just wouldn't convert the font I wanted, and this is so much easier then WEFT.

I am using the same font as impallari no less, hope it doesn't turn into Verdana :P

Comment by keny10, Aug 01, 2009

Thanks this is a must !

Comment by iphonetestvoornking, Aug 03, 2009

I compiled this on my iMac (OS X 10.5.7). But when I try to convert a fon all it gives me when I try to make an .eot is "command not found".

Comment by shovemedia, Aug 05, 2009

I had horrid trouble with my converted opentype font, but I found the problem and posted a solution: http://karoshiethos.com/2009/08/05/creating-eot-files-with-ttf2eot/

Comment by skimler, Aug 25, 2009

Confirming Impallari's comment that:

1) It's not necessary to use conditional comments for the IE's (IE6,7 & 8), 2) Just make 2 @font-face declarations;

It is imperative that the IE declaration come FIRST. This isn't for IE, but rather, for the 'modern' browsers (i.e., FFx 3.5+, Safari, etc.) If the EOT file is last, those browsers will try to load the EOT file and fail.

Here's a more detailed write-up on how to achieve cross-browser font embedding: http://randsco.com/index.php/2009/07/04/cross_browser_font_embedding

Cheers

Comment by Fliawebdesign, Sep 04, 2009

I can't get font-face to work on ie

this is what i got , declaring eot before for ie browsers

@font-face {

font-family: "trade"; src: url("../type/LTe50543.eot");
} / EOT file for IE /

@font-face {

font-family: "trade"; src: url("../type/LTe50543.ttf") format("TrueType?"); }

works in all other browser that support @font-face

Comment by alecgorge, Sep 11, 2009

for people who want to drag and drop multiple font files and create EOT files with the same name, here is a batch file. Just put it in the same directory as ttf2eot.exe and drag fonts on to the .bat file.

@echo off
if [%1]==[] goto :eof
:loop
ttf2eot %1 "%~dpn1.eot"
shift
if not [%1]==[] goto loop
Comment by mburu.samuel, Oct 17, 2009

This tool is so much better than WEFT, it wants your email address to use it... I thought that was ridiculous... in mere minutes I was able to get this going and done..

Thanks!! (I don't use the double ! marks without reason)

Comment by sara.tusar, Oct 26, 2009

You are the greatest!

Comment by chaiyod, Dec 13, 2009

WOW excellent tool i love this

Comment by ed...@web.de, Dec 31, 2009

Batch file from Sep 11, 2009 won't work if ttf2eot.exe isn't within your path environment. Name the batch ttf2eot.cmd and place it in the same directory as ttf2eot.exe and everything is fine:

@set prog=%~pn0.exe @if %1?== goto :eof :loop @%prog% %1 "%~dpn1.eot" @shift @if not %1?== goto loop

Why do I have to register at google with a valid email adress to write this comment? See above: mburu.samuel, Oct 17, 2009. The email at WEFT isn't checked.

Comment by rockclimber2009, Jan 04 (3 days ago)

Hi, is there a way to convert this code into PHP ??


Sign in to add a comment
Hosted by Google Code