|
Demo
Simple ttf2eot Example
IntroductionSimple demonstration of ttf2eot usage. DetailsFirst 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 UsersIf 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. |
@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"); }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. :(
IE will ignore font-face declarations with any format() hints:
http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
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
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
Thanks this is a must !
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".
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/
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
I can't get font-face to work on ie
this is what i got , declaring eot before for ie browsers
@font-face {
@font-face {
works in all other browser that support @font-face
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.
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)
You are the greatest!
WOW excellent tool i love this
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.
Hi, is there a way to convert this code into PHP ??