The Bright Lines » EOT

Implementing font-face cross domain

Wouter Bos — Tue, 12 Jan 2010 21:13:59 +0000

I’m still in the middle of a redesign of my personal weblog, but I’m glad I got the font-face working. It was a hard nut to crack. The source of all the trouble was that Firefox would load font files from other domains. Although the domain restriction isn’t making things easier, it is sort of sensible.

Internet Explorer is the only browser that supports EOT, a font format that has digital rights management. That way you can make sure that your $200 font isn’t downloaded and used by everybody on the internet.

But like I said: IE is the only browser that can understand that file type. So Mozilla apparently implemented some sort of protection against font hijackers: It will only accept fonts from domains that specifically allow fonts to be downloaded. In case of Apache you have to add the following code below to the .htaccess file. I found it on Open Font Library.

Header set Access-Control-Allow-Origin "*"

This does not help you prevent people from stealing your font, but it will protect you from web developers who want to add the URL to the font on your domain in their font-face declaration. It’s not really a solution if you ask me. It seems more like a gesture to the creators of fonts.

It appears you could replace the asteriks with the domain of your website, but in my case (http://electricspace.blogspot.com/) did not do the job.

My favorite for converting fonts to EOT

Wouter Bos — Thu, 10 Dec 2009 06:39:33 +0000

ttf2eot

In order to use webfonts in your website you have to convert regular fonts to Microsofts EOT format. Normally I would use the online version of ttf2eot, which works reasonably well. As long if you have a TTF. If you have another type of font like a OTF, you have to find another converter first.

WEFT

In case ttf2eot fails with a particular font (like in my case) I grudgingly use Microsofts WEFT tool. I dislike WEFT for its instability and weird workflow/interface. But last time I tried it, it didn’t do a good job at all. Only 3 of the 4 fonts I had to convert to EOT were recognized and none of that 3 fonts worked in IE.

Fontsquirrel

Then while looking for a manual on WEFT, I came across the free @font-face Kit Generator of Fontsquirrel. And man, did that save the day. Uploading and converting the fonts was very easy. On top of it, you get an example web page packed in a zip with the webfonts in it. It looks something like the screenshot below. The service can also convert fonts to WOFF (Firefox) and SVG (Chrome & iPhone).

Fontsquirrel not only converts your fonts to EOT, but also shows an example how it would look like in your browser in various font sizes.

What to look out for in Fontsquirrel

The only thing that did go wrong was the hinting. If I chose the default option “Use existing hints” the letter “B” did not render well as you can see in the screenshot below. When I chose to remove the hinting, the conversion was successful.

Fontsquirrel too can get it wrong. Always check all the types

The problem in the previous piccture was cleard by removing all hints.

The trouble with @font-face

Wouter Bos — Sun, 01 Nov 2009 12:02:01 +0000

Finally it seems like we’re getting rid of the shackles of webfonts. With the implementation of the CSS-technique @font-face in Firefox 3.5, Safari and Opera we’re not only able to choose between fonts like Arial, Times and Courier, but also between any TTF or OTF on our computers. IE already had an implementation of @font-face for years that only supports a proprietary format called EOT, but both 2 techniques work together perfectly in one CSS file.

If custom fonts are so great, Why isn’t anyone using it?

In case you’re already in the process of removing that lame Times New Roman from your computer: look around on the web. There’s almost no website to be found that shows non-standard fonts through the @font-face technique. They all use images or sIFR. So why is no-one using @font-face? I decided to set up a @font-face test page and try it in different browsers and found a few shortcomings:

No Chrome

Although Chrome is able to show custom fonts it’s disabled by default as reported on opentype.info. It appears that you can enable it by adding the option -enable-remote-fonts. It’s not clear if remote fonts are going to enabled by default soon, but I guess the Chrome team first have to address security issues that come with the use of webfonts.

Text flashing in Firefox

When loading the page, Firefox first shows the text in a default font. Only after the TTF or OTF is loaded, it will change the text accordingly. Even when I reload the page, the texts in the web page flashes from web font to TrueType font. Although it’s not a a nice effect, it’s no disaster either.

IE7+ in high security level

IE7 and IE8 in the highest security level will not show custom fonts, but will show a webfont. I’ve never ever had IE in the highest security level, but I reckon some will. And I guess many large organizations will have IE set to the highest security level. So be prepared that some people won’t see your carefully crafted website like you intended.

Deal breaker: IE6 in high security level

Well, until now the worst that could happen is that a browser won’t show a custom font but will default to a system font installed on your computer. But using custom fonts in IE6 is close to impossible. IE supports @font-face since IE4, but after the release of IE6 Microsoft decided to crank up the security. This resulted in a dialogue box that nicely asks if you’d like to download the custom font that might be a security breach. No problem. Until you click a link. Or even refresh the page. You’ll get that dialogue box once again. Huh? Didn’t I just answer that question? I’m still on the website, so why do I have to decide once again if I want to download a font that’s most likely still in my cache?

There goes your usable website down the drain. Like I said: I don’t think that many people will have their security set that high, but it still is a real deal breaker. I suggest that it’s best to show no custom fonts at all in IE6. You can do that by loading an alternate CSS file with conditional comments (tip of a colleague of mine). No fancy fonts is still better than the risk of scaring away visitors.

Last but not least: Converting fonts to EOT

Like I said earlier: Microsoft does not support TTF or OTF. That’s because if you link your CSS to a font file it has to be downloadable for anyone. That’s sour if you just paid a few hundred bucks for some premium font. Not to mention for the persons or companies who made that font. So Microsoft came up with a font format that’s not usable as a regular font and that’s restricted to some specific list of domains. Perfect.

But WEFT, the program to create EOT font files that Microsoft publicized, is awkward in use (if you ask me) and just doesn’t work on my Vista PC. It crashes before I’m able to convert a single font. There is an open source program called ttf2eot and there are even websites that convert fonts with that program like the one on www.kirsle.net. But ttf2eot is still version 0.0.2-2, so that sounds very alpha to me although it seems to do a good job. So be sure to check first if you are able to convert a font before you promise something to the costumer.

An other way to protect the authors of fonts (and yourself as a user that paid a lot of money) is the use of webfont services that supply the raw font. That way you can use a specific font without having to worry that you become an unintentionally illegal provider of premium fonts.

But it will still change the web

So there are still some hurdles to overcome. But it’s clear that it won’t take long before the web will be significantly different from what we know now because the use of custom fonts. Although I’m convinced that with the plethora of available fonts, system fonts like Arial will stay an all-time favorite for a long time.

Update

I had some good feedback (see comments) with some great links: