all about food

all about photography

all about books

@font-face made easy

January 24th, 2010

Update

Well turns out the CSS code given before doesn’t work with IE. The problem with IE that I could figure so far is that it needs to have local src.

@font-face { font-family: 'MyFont'; src: url('fonts/MyFont.eot'); src: local('My Font'), local('MyFont'), url('fonts/MyFont.ttf') format('truetype'); }

Without the “local” font-face won’t work in IE.

/————————/

I’m working on a client website that requires a custom font on the navigation menu’s and headers. The font came in the old Apple format, PostScript type. The easiest way to use this would be using sIFR or Cufon. But I am partial to those methods due that they require Flash and/or JavaScript.

To use font-face I need a TrueType(.ttf) file for Gecko and Webkit browers and Embedded OpenType(.eot) for Internet Explorer.

First thing I did was a Google search to find out how to convert PostScript type font. This can be done by opening your Terminal, navigate to the location of the font you want to convert and run the following command: cat "MyFont/..namedfork/rsrc" > "MyFont.dfont"

This will convert the PostScript to dfont.

Through Googling I found a free online converter where you can upload your dfont file and convert it to TrueType(.ttf). You can convert to eot. also but the file it generated didn’t work for me. Instead I used the command line tool TTF2EOT I found via Jonathan Snook’s Font Embed article.

So now I had a .ttf and an eot. file. Next was a working CSS. I used the following CSS code:

@font-face { font-family: 'MyFont'; src: url('fonts/MyFont.eot'); src: url('fonts/MyFont.ttf') format('truetype'); }wrong code, see above update

Good practice shows you have to use the local: method too in case users have the font on their computer. But in this case the chance is of that is neglect able. So I opted to keep the code to a minimum.

The simplicity of font-face makes me really want there to be a license solution for web fonts that doesn’t require an intermediate. I’m not a browser tech, but of if there could be a way to to protect the font files from direct download or an encryption method, that already would go a long way to protecting licensed fonts.

But as long as there isn’t I will use free fonts and in commercial situations Typekit will have to do, that is if they have the font in their library.

Comments (0) | Filed under: Websites Tags: ,