Mobile version (Display Regular Site)

Skip to: Navigation | Content | Sidebar | Footer


Weblog Entry

Starting with @font-face

October 05, 2009

I’ve been using Cufón off and on since writing about font embedding back in May. It’s a great hack, but browser progress since that time has been making me feel that the native CSS @font-face rule is becoming increasingly viable. Or, at least enough so that it seems like it’s time to start dabbling.

Yes, I know of TypeKit. It’s a great idea and there are some solid reasons to consider using it. But I’m still interested in using the native technology from time to time, which is where we begin.

Ignoring the licensing issues for now, the problems are those of syntax and technology. Syntax because Internet Explorer requires you to import a different file than every other browser. Technology because, well, Internet Explorer requires you to import a different file than every other browser.

If you just forget about IE for a minute then @font-face is surprisingly easy to use. Getting started requires a couple of lines of CSS and the right file in the right place. You can have a custom typeface imported into your page with just a little more work than applying a custom background image. Start with the @font-face declaration itself:

@font-face {
  font-family: 'Museo Sans';
  src: local('Museo Sans 500'), local('Museo Sans'), 
         url(MuseoSans_500.otf) format('opentype');
}

What this is saying is: “hey browser, here’s a font family called ‘Museo Sans’. When you see reference to this font in the stylesheet please check whether the font exists on the user’s local computer. If it doesn’t then here’s a file in OpenType format that you can use instead.” I’ve specified two different faces for the local computer, both the generic family name (Museo Sans) and the specific weight I’d like to use (Museo Sans 500). This may not be strictly required depending on the typeface, but can’t a bad idea.

Once you’ve defined the font-family all you have to do is reference it on elements you’d like to be rendered with it:

h1 {
	font-family: "Museo Sans", Arial, sans-serif;
}

That’s it, really. Firefox, Safari, Opera? The latest versions of these browsers all work like a charm.

It’s when you remember that IE won’t do anything with this that you start running into problems. Luckily, Paul Irish uncovered the magic voodoo incantation that selectively serves the right file to the right browser. The syntax is only marginally more complicated:

@font-face {
  font-family: 'Museo Sans';
  src: url(MuseoSans_500.eot);
  src: local('Museo Sans 500'), local('Museo Sans'), 
         url(MuseoSans_500.otf) format('opentype');
}

I’ll leave the explanation of why that particular rule order is important to Paul’s article, but suffice it to say this is the syntax you should be using. (Also related, Paul’s Rich Typography presentation is worth spending some time flipping through.)

So that’s the syntax part of the equation solved. But remember we also have a technological problem; IE doesn’t do anything useful with OTF or TTF files. It requires a converted, proprietary (though proposed-to-be-open) format called EOT. If you have a TTF or OTF file, how do you convert it to EOT?

More on this in a follow-up post in the near future. I’ll spoil the punchline right now: the official tool for doing so is a horrible piece of abandonware that might work if you get lucky (I didn’t). The alternatives are largely arcane command line tools that, apparently, work for some (not me).

However, there is a way. It ain’t pretty. But it has the advantage of actually working.


1
Dave S. says:
October 05, 22h

So it looks like Paul’s site is down at the moment. It was around when I wrote the bulk of this yesterday, so I’d presume it will be back in the near future.

2
Mitch says:
October 05, 23h

Have you tried this dave?

Is your way of conversion any different?

3
Mitch says:
October 05, 23h

Oops, here’s the link for the comment above:

http://snook.ca/archives/html_and_css/screencast-converting-ttf2eot

4
John says:
October 05, 23h

A comprehensive @font-face post, contributed to by Paul Irish and focused on browser issues…
http://randsco.com/index.php/2009/09/04/better_font_face_syntax

5
October 06, 02h

According to http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/:

“It (IE) doesn’t understand format() hints and will ignore any @font-face rule containing these hints.”

So you have to have to separate declarations of .eot files and others and can’t combine the two as in Paul Irish’s example.

6
October 06, 04h

I’m looking forward to the second article. I failed miserably trying to convert OTF to EOT. I was trying convert OTF to TTF first, but then the result wasn’t read by this terrible MS tool you mentioned.

So, I hope you won’t keep us waiting for too long, Dave :).

7
Michał Czernow says:
October 06, 04h

I was lately playing with @font-face and had problems with converting otf to eot too. Converting ttf to eot is quite easy (http://ttf2eot.sebastiankippe.com/). So I did something like this: took otf and converted it to ttf (http://onlinefontconverter.com/). And then there was no problem with ttf2eot. And it worked in IE without any problems.

8
October 06, 06h

You leave us in the lurch! If this were a cooking show, you’d have shown us how to cook the goose, but told us that learning how to make stuffing is in next-week’s episode!

Still, it’s good to know that there’s a straightforward way to do it (I use typekit on my website now) and that browser makers are serious about custom typography on the web.

9
mike says:
October 06, 06h

Great, great post. Gets to the point and lays out the facts, unique in CSS blog posts.

10
October 06, 08h

I actually had fairly decent success with the afore-mentioned MS tool. More information can be found on a blog post I did here:

http://blog.apluswebcreations.com/web-development/solving-the-font-issue-for-web-designers/

11
Dave S. says:
October 06, 09h

@Mitch - yep, that’s the only thing that worked for me. Couldn’t beat Jonathan to the punch and write up his method before he did, but up until he showed me how he does it yesterday, I was set to give up on ever getting EOT working.

@Krzysztof & Nick - see Mitch’s comment for the actual method I’ll be writing about.

@Michał - you got lucky if that method worked for you, because it absolutely didn’t for me. Could be font-specific.

@Mike Badgley - you also got lucky; for me and others, WEFT dies before it can even build a font library.

12
October 06, 09h

I tend to use a separate @font-face rule for IE in a conditionally-commented stylesheet, but this looks much smoother. Nice.

And yes, WEFT blows big steamy chunks.

13
October 06, 09h

It seems that IE8 supports @font-face, at least with the version that I have (Windows 7 Professional, x64 RTM) 8.0.7600.16385

I only found this out when I was working on a challenge for one of my Web Development classes, and I was using @font-face in my CSS. I looked at it in Internet Explorer, and there it was.

14
October 06, 10h

Snook’s screencast brings EOT to the masses. Now if only font rendering on Windows wasn’t so horrid.

15
October 06, 16h

The one problem I’ve encountered in implementing @font-face is with using italics. If I include, say, Linux Libertine O via @font-face, and specify it as my body font, even if I also include Linux Libertine O Italics in @font-face it won’t be picked up as the italics version of the body font. Instead, the browser will create a fake italic (aka oblique) out of Linux Libertine O.

I’ve tried getting around this by specifying Linux Libertine O Italics as the preferred font for em and i, but this has its own problems, inasmuch as you then have to set font-style:normal to prevent the browser from putting trying to “italicize” the already italic font by making it oblique. That means, then, that you have to specify all the font options for em and i using italic versions. The whole thing is very messy.

If anyone knows of any solutions to this problem, I’d be very grateful to hear them.

16
DRoss says:
October 06, 17h

I haven’t used this yet but supposedly this online tool should convert ttf to eot.

http://www.kirsle.net/wizards/ttf2eot.cgi

17
Oren says:
October 06, 18h

Can someone tell what are the supported browsers versions?

18
Nick Day says:
October 07, 02h

@DRoss - I used that tool yesterday and the EOT file it generated worked fine for me.

The big issue preventing me (and most people) from using @font-face is licensing. The font foundries aren’t going to agree to allowing their fonts to be used with @font-face until there is some sort of mechanism to protect the original font file. Unless I’m missing something and this already exists?

So for now I’m having to use Cufon (if the license allows) or otherwise stick with sIFR.

19
Michał Czernow says:
October 07, 05h

@D Bnonn Tennant
Have you tried something like this:
“@font-face {
font-family: …;
font-style: italic;
src: …;
}”? I haven’t, so I can’t say that will work. I just know that this syntax is possible.

@Nick Day
Some nice people prepared good resources of fonts, which license allows embedding (I use webfonts.info and www.fontsquirrel.com).

20
ABS says:
October 08, 01h

Are any other readers getting @font-face to work on other versions of IE8? Like on XP or Vista?

I have not yet used custom fonts not because of IE, but because of large file size. I have not experimented in years though, but I’ll try it out soon and hopefully get a reasonable size (Web fonts are cached, right?)

As for the rule order not working, I think we are stuck serving an IE-only stylesheet.

21
Stefan says:
October 10, 08h

I just tried this on XP in IE8, Firefox and Safari 4. Works quite fine in Firefox and Safari, and actually in IE8 as well.
However, some fonts look horrible in IE8.
Example at FontSquirrel:
http://www.fontsquirrel.com/fontfacedemo/TitilliumText14L
Personally, I like the way it looks in Firefox best. Headings look slightly smoother with Safari (which is better in my opinion), but for paragraphs, sharper rendering is easier to read.

22
Andrew says:
October 17, 08h

“If you just forget about IE for a minute then [insert CSS 2+ declaration or selector] is surprisingly easy to use.”

23
Claude says:
October 19, 05h

Hi Dave,

I know you know TypeKit but you should also keep an eye on Fontself (http://www.fontself.com/)

Cheers,
Claude

24
Keith says:
October 20, 06h

i’m a little beyond fashionably late, but font squirrel has a @font-face generator that allows you to upload .ttf or .otf and in turn download the entire (or a smaller partial on Windows) @font-face kit which consists of the converted .eot, .svg, the original uploaded font file, an example page and Paul Irish’s CSS technique for sure-fire embedding:
http://www.fontsquirrel.com/fontface/generator

25
Tasarim says:
January 05, 14h

“If you forget about IE”
Wish i could. Most of the clients i work for, “surprisingly” use IE if not very older versions of it. Can’t remember how many times i had to convert fonts to images because of this.

Anyway, thanks for the post. I’ll surely try it in the future :)

26
January 20, 23h

EOT is now seen to have potentially serious security issues.

http://www.qualys.com/research/alerts/view.php/2010-01-12-1

This rather upsets the apple cart.

The font design and publishing industry has been trying to move the browser folks to a more secure XML webfont format which also provides for I/P protection of commercial fonts.

This is still an open question!

Cheers!
Peter

27
January 21, 11h

Note that Firefox 3.6 now support WOFF

http://hacks.mozilla.org/2009/10/woff/