How to transform OTF or TTF to EOT

In this post I explain how to transform TTF or OTF fonts into EOT font.
You can find many tutorials in the web, but I just wanted to have my recipe to come back quickly next time I need it.

A bit of history

Not so long time ago you could get your custom font working in your site by using different hacks like sIFR. Using flash or different scripts to change your text for images built dynamically or just flash. I don't know exactly how all these hacks work because I didn't like that much the results and it was very complicated to make it work.

Microsoft created the Embedded OpenType (EOT) to use it in Microsoft's Internet Explorer. In 2007 they submitted it to the W3C in 2007 as part of CSS3, but it was rejected.

Actually, it looks like the W3C recommends to use the Embedded OpenType so now all main browsers support the use of EOT fonts.

 

Requirements

In Microsoft's Windows there is a utility to build EOT fonts, WEFT but I don't know about that.

I'm using Ubuntu 12.04 LTS but it should work in any linux. You have to install eot-utils pack. Run this in a terminal:

pedro@vaio01:~$ sudo apt-get install eot-utils

 

Conversion

Then, run the next command to transform the font:

pedro@vaio01:~$ mkeot font.ttf http://your.web.site http://another.web > my-fancy-font.eot

The first parameter is the font OTF or TTF to transform. The second parameter is a list of URLs where the EOT font can be used.

This parameter is optional but if you leave it empty Internet Explorer could interpret it as this font is used from no site.

This command ends by sending the returned inforamtion to a file name with the extension .eot.

 

Using EOT

Copy both the OTF or TTF and EOT files to some accesible path from your web site. In CakePHP, I'm using "app/webroot/fonts".

Then in the CSS file write:

@font-face{
  font-family: fancy-font;
  font-style: normal;
  font-weight: normal;
  src: url('../fonts/my-fancy-font.eot')
      ,url('../fonts/font.ttf') format('truetype');
}

Then if you want to use that font in your body, for example, write this:

body{
  font-family: fancy-font;
}

 

Easy, doesn't it?

 

To know more details about mkeot: http://manpages.ubuntu.com/manpages/natty/man1/mkeot.1.html

Mon, Jun 25th 2012, 16:42 | CSS, Fonts

0 Comments

Add New Comment

Your name:
Your e-mail:
Your web page:
Comment:
I would like to receive new comment notification.
Security code: