|
Demo
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 ??
it would be great if you could replace the lzcomp compressor by LZMA http://tukaani.org/lzma/
i have problems with windows...how can i get the ".c" and ".h" files to ".exe" without any programming environment?! got anybody a link?
it doens work on Windows 7
WEFT do smaller files than ttf2eot for me.
Batch file won't work with Windows 7 because Windows 7 allows you to have spaces in your path lines. ( Instead of "Progra~1" it uses "Program Files" )
I tried to convert Clarendon TTF font and it died with the return error, “Unknown error parsing input font, m"
dad.bat (drag and drop)
code: @echo off set path=%~d0%~p0 ttf2eot.exe "%~dpn1.ttf" "%~dpn1.eot"
be serious! =)
install: ttf2eot
cp ttf2eot /usr/bin
ttf2eot: OpenTypeUtilities.o ttf2eot.o
g++ -O3 -o $@ $^
strip $@
OpenTypeUtilities.o: OpenTypeUtilities.cpp
g++ -O3 -c -o $@ $^
ttf2eot.o: ttf2eot.cpp
g++ -O3 -c -o $@ $^
clean:
rm -f ttf2eot OpenTypeUtilities.o ttf2eot.o
Hi, I downloaded the ttf2eot tool, and got a folder with: OpenTypeUtilities?.cpp OpenTypeUtilities?.h ttf2eot.cpp Etc.
I have FontForge? and x11 installed, on my Mac OS X 10.4.x. MacBookPro?. Also have MacPorts? installed
Can someone please help using this script, I am a graphic designer not a programmer.
A step by step ‘lead by the nose’ will be appreciated.
thanks
THX!
I really tried to get this working on OS X Snowleopard. Your makefile is like "aladjev....@gmail.com" points out, not the best one. So I made a new makefile. Make fine, moved to local bin and tried it out. I got a ton of output during runtime, then nothing happen. It did not make any eot file of that font.
If anyone managed to get this working on Snowleopard, please drop me a line. I am out of time to solve this problem, because of delivery. I can´t understand why no one have made a OET converter app for mac.
Output:
21?LP?%syrRapScript_FreeRegularNVersion 1.000;PS 001.000;hotconv 1.0.38RapScript_FreeOTTO ?CFF ??aEp?OS/2???`cmap???i??head??7??6hhea :???$hmtxpf/? maxpHP?namee/ONOpost??2P rys%_<???Mz1?Mz1?6?:?0??V6?6???HPH????????2??pyrs@ ??V0??6 !?88FM8'8? ? ??
??R8F p? ? ? &? ? N? ? M k k ?... and so on
brew install ttf2eot
i use parallel desktops on my macOS so i can test all the browsers :) so i used ttf2oet on my virtual windows machine
I don't think I missed anything,(except how to program in C/C++). Trying to build I get:
Not sure why it works for others and not me, possibly that I don't have X11 on this machine. What am I doing wrong?
Muchas Gracias!