Screencast: Converting OTF or TTF to EOT
In case you hadn't noticed the lovely titles on this page, they're League Gothic. Well, they should be if you happen to be using the latest version of Firefox, Safari, or Internet Explorer. However, it took much trial and error to figure out exactly how to get there. There are a number of pieces to the puzzle but in the end, I got something to work. The assumption here is that you are on a Mac (as I am) but I believe these tools work the same on PC.
FontForge
First up is FontForge. FontForge is an open source font editing and conversion application. There's a command line version but I highly recommend getting the full-blown desktop app—if only because that's what I did! There are pre-built packages already done for the Mac. You may need to install X11 in advance of installing FontForge but it's been awhile since I installed it and I honestly can't remember if or how I did.
From within FontForge, you can open up an OTF or TTF file, make any changes and then generate a font in the format of your choice. In this case, it'll be a TrueType font. Now, you might think you can go ahead and take that TTF and run it through a program like WEFT, Microsoft's ancient Windows-only TTF to EOT conversion application. Except I couldn't get it to work. It locked up every single time. You may think that a TTF2EOT conversion should work and it may. It didn't with any of the fonts I was trying to work with, though.
After finding an article that discussed some additional properties that need to be defined, I realized that FontForge can be used to define those settings. Go to the Element menu and select Font Info. From there, choose TTF Names from the left side. The first step is to delete any of the existing properties on this screen. They'll be in black. The red ones can't be deleted. Then, create a new item. You'll need to create 3 new items, in fact. Make sure to always select "English (US)" as the language. Then choose the first, second and fourth items from the list. The first item is your font name, the second item is your font style and finally, the fourth item is the font name and font style separated by a hyphen.
TTF2EOT
Once you have completed the conversion, you need to convert the TrueType font into an Embedded OpenType format. That's a file with an EOT extension and the format that Internet Explorer needs. You can use the TTF2EOT command line tool or use an online tool (or an alternative) that can do the conversion for you (I use the online tool).
CSS
You should now have two files: an EOT and an OFT or TTF. I highly recommend you check out Paul Irish's Bulletproof @font-face implementation for more details but here it is in a nutshell.
@font-face {
font-family: 'Graublau Web';
src: url(GraublauWeb.eot);
src: local('Graublau Web Regular'), local('Graublau Web'),
url(GraublauWeb.otf) format('opentype');
}The font-family name is a unique name that will be used when defining a font-family elsewhere in your CSS. Then, just specify the EOT format for IE; the local format, in case users might already have the font installed (and to prevent IE from trying to download the OTF/TTF); and then specify the path to the OTF or TTF file.
The Future
Font embedding is still early days but, given the right font with the right licensing, you can create a fantastic experience for your visitors.
Conversation
Thank you for posting this, Jon. I knew I was close, but just shy of getting it to work right.
I still get mixed results converting font's to ttf using fontforge, which is incredibly painful to setup on windows by the way. It really does depend on the font you are using a lot of the fonts I get jaggered edges on C's etc.
I wrote an article about how to implement custome fonts on a website with @font-face (http://blog.nordahl.me/webdesign/font-face/). I'll have to update it later today with information on how to make @font-face available for IE with EOT. I guess it's no point implement it on my personal blog since it's HTML5, but its a good tip nonetheless, thanks.
Great stuff Snook! Thanks for posting.
You can do it without font-forge
http://circuitbomb.com/index.php/2009/09/easy-oft-to-eot-conversion-for-font-face-css3-and-internet-explorer/
@Dustin: how reliably does the OTF to TTF work where it'll allow the TTF to EOT to work properly?
Font Squirrel has some downloads that already have TTF/OTF and EOT versions packaged together for the purposes of @font-face usage. It can save a few steps if the font you want to use is in their collection.
Thanks for the useful and informative post. This is something I have not tried out before and will definitely try this out.
I had some success with that circuitbomb.com converter (2 out of 4 tested fonts worked). On my XP virtual machine. But the same fonts failed on the Windows7 vm. The rendering on screen (XP) was not as good as the one from the installed equivalent.
Then I realised that MS has been pushing a 'fix' for some security issue that kills t2embed (the underlying api that allow eot to work) when the name table records are too large (5000bytes I think). And that XP virtual machine is not up to date….
(editing the fonts accordingly in FontForge 'fixes' the issue – but this becomes a complicated exercise of dubious legality)
I tried using the Online Font Converter the other day but it didn't work for me - kept exporting archive files that I couldn't open. So I tried FontForge instead. I didn't have any problem creating an .EOT file and didn't have to do the extra steps that you've described with the editing of properties in FontForge (font was Museo Sans 500).
Also, I just made a similar comment on Mezzoblue, but I read on Mozilla Hacks:
so you need to create two separate style declarations, one for the .eot and one for the others.
Just to highlight, the technique I've outlined in this article is the most consistent approach to converting OTF to TTF to EOT. If one of the easy, automated approaches works right off the bat, that's great. With the two fonts I was working with, nothing worked. I've talked to two other designers who've ran into similar problems as myself and again, the technique I've outlined above has worked.
@John Faulds: the technique that I've detailed here in the article is directly from Paul Irish's article and has been tested to work. It works right here on this very site. Two separate declarations are not required.
I've used a similar technique while embedding fonts in Adobe Flex and it's great to finally see font embedding in the web browsers.
Thanks for a great tutorial, and I must say I really like the font in your titles.
@Jonathan
Well, I've only tested it for use on my own site, which is the one I provided a link to. If your looking for a quick fix that may be the answer.
Thanks for taking the time to put together such a thorough explanation. I've been getting tripped up with those extra properties that the EOT needs. With this tutorial, though, conversions are a breeze.
Awesome—I've been looking for an online TTF2EOT converter. I'll give this one a try. I had issues with the free Aller face. It converted fine, but had terrible jaggies in Firefox 3.5 and Internet Explorer 6+. In Safari it looked perfect. I wonder if these issues are related to the face or the TTF2EOT utility. With such mixed results, I bet it's the face.
In IE7, loading a page (like this very page) with an embedded font produces the annoying warning "This page uses fonts that need to be temporarily installed." Is there anyway to forestall that, short of having the visitor adjust IE's Internet Options/Security settings?
@Philip Barron: I've been hearing of some odd reports, although not from IE7. Someone else mentioned seeing a similar message in Firefox. I wonder if the IE7 issue is a recent one as I just switched the top nav to Museo Sans. It's possible some additional settings should be made to correct that.
Thanks for this Jonathan. Many of the fonts on our site fontsquirrel.com have had bad EOT files. I just completed a Fontforge script that seems to fix the fonts in a similar way that you describe. If anyone has had any issues with EOT files in IE, I'm fairly certain that I've fixed most if not all of them.
Perhaps I will have to create an online converter for the web devs out there struggling with this. It took me two days to track all this stuff down....
Jonathan: Here's also an example to accommodate the Chrome browser: http://nova-group.se/test/fonts/
Opera, Safari and Chrome will use the SVG font while Firefox will use the TTF. The SVG is half the size of the TTF font, cutting the transfer time in half.
Excellent. Hadn't thought much about SVG fonts, but great idea!
I think Andy's nailed it.
@Ethan Dunham & Dross: Thanks :)
As you can see in the example, the SVG font works in Chrome even if --enable-remote-font is disabled (which it is by default). A TTF font would require the switch to be enabled.
I've followed this tutorial several times now using Museo 300 and when I upload the TTF to TTF2EOT converter, it says everything worked fine, but it's not really working - it's not showing the test text in Museo.
I tested the TTF2EOT service with an actual TTF font (not a OTF that I converted to TTF using the tutorial) and it works fine. Is anyone else having problems like this?
Just a follow up to say I got it working... Though I'm not convinced that Museo (serif version) looks that good in IE...
really nice read and screencast to convert font for font-face great job.
Thank you! I would now go on this blog every day!
Have a nice day
Thanks for the tips! Especially the one about the Bulletproof CSS. I also got TTF2EOT to work on my Mac. Works flawlessly... By the way, when you convert a font via FontLab, the extra steps don't seem to be necessary (or maybe those extra steps are font-specific)
By the way, there's a typo in your article; under the CSS title, it should say
OFT<insert>OTF</insert>.This post is a god sent, been working on a fix for this and couldn't get it to go. You suggestions work flawlessly.
Thanks - C
No need to use FontForge or ttf2eot.
http://onlinefontconverter.com added eot recently.
I be enduring Verizon's Palm Pre Added to and can't non-standard like to see any momentary display videos on the browser. I've tried to download adobe flash entertainer but it won't seem to subside me. Anyone differentiate what to do?