I second Lars above... Opera 9.64 on Ubuntu here... no luck. Works beautifully on Opera 10 though.

Wow, another font file to throw into the fray? TTF and EOT are fine, but an extra SVG? I guess I need to try it in practice to see if it's worth it, but none the less: A great find and great write up!

Finally a good overview of the possibilities of fonts in the different browsers. Thank you.

Should add my name to the previous comment :)

brilliant post :)
Been trying to find some time to play around with font embedding... but does all seem quite drawn out - now I know where to start, right here.
Thanks for a great write up :)

I just want to thank you for taking all of this testing-pain and then share the good stuff with us. I hope this will lead to elegant ways for @font-face-embedding.
Soon we might say: "There's an app for that."

Excellent! I'm going to study this a little further with all the great material you posted

Thanks for such a helpful article. I've adopted Paul Irish's syntax and tried to use @font-face here. It works perfectly in ie and locally in ff, but for some reason won't work on the live site in ff.

Does anyone know if there are any server issues/permissions that need to be set to get otf files working from a Windows server? Or - more likely - have I just got something wrong?

I'll take that Font Squirrel comment as a challenge, Jonathan. SVG support and subsetting coming soon... :-)

This is solid work Jonathan! Thanks a million for providing the results freely. In future font-embedding projects, I'll definitely refer to this list.

Here's another hoping that PPK can provide results about mobile devices + font embedding. That would be superb!

Thanks again!

Nice post! I spent some time adding an @font-face the other day after watching your screencast, and felt like I learned a ton, but ended up falling back to Cufon after i found the serif font I wanted rendered like crap on IE in particular but also a little funky on some other Win browsers. Font-sizes weren't terribly small at 18px and 14px.

The san-serifs did okay.

Wondering if you found issues with that, and did something pre-@font-face or other?

Again, thanks My Man for sharing.

What, no cred for the SVG thing?

too much work. i'll stick with cufon for now.

awesome post. thanx

Very complete article. I never got the Microsoft tool to work either, and I don't like that command line program. Instead, I use http://ttf2eot.sebastiankippe.com although I don't know if uploading licensed fonts on there is very legal.

@Jonathan: Yes, I did.

Also, I converted the font in full from TTF and the SVG ended up half the size of its TTF counterpart. I guess this could be coincidental and specific to that font. Either way, I would not recommend anyone to use the fonts without first optimizing them, of course.

Why SVG? OpenType seems to do the job in all browsers but IE?

Very very cool! Thank you for this article and for explaining how SVG fonts are embedded.

@Linus: As was mentioned in the article, SVG fonts are supported in Chrome .3+ and Opera 9. If you're happy with the cutting edge browsers, you don't have to worry about this.

Furthermore, SVG is just cool, so having another use case more really rocks. And my personal measuring on GaramondNo8 (GPL font) shows me a saving of 308kB in file size from the TTF to the SVG version. *That's* a reason for switching, and I didn't even remove the hkern elements.

Cheers,

... I should explain my last figure: I use all four TTFs, Regular, Medium, Italic and MedIta. On summary, and after converting the TTFs to SVG the fonts have lost the 308kB all together.

I just spent a few days doing a custom WordPress job for a friend. When I was done I was real excited that it looked so good in all the browsers on my machine. When I looked at it on my backup machine, not so much. The title font really made the top of the page, and when that went away... I'm gonna try your advice. Good timing on this article for me.

great and through article! Fonts have long been a design element that a lot of firms are ignorant on. Just happened to stumble upon this site, bookmarked now! Thanks for the info.

Great feeling of Time.
Thanks - I was just looking for this information and you wrote this post yesterday.

Great work... but I will definitely stick to Cufon - it's just so easy and I'm a Javascript addict.

@linus If you want to know about the drawbacks of existing font formats, I wrote a bit on that.

@Manuel: Actually, Opera 9 does not support SVG fonts for @font-face. Opera 10 does.

Any word on the legal implications? If I take a legally purchased font and convert it for embedding purposes am I opening myself up to legal trouble from the font creator?

seems won't be rendered by gdi++

You did a lot of really great leg work here. This will definitely be my jumping off point for adventures in font-face land.

I seem to find that the @font-face seems to render find rather chunky. If anyone can help me figure out how to get them to render smooth, I will be in your debt. Thanks!

Very nice Post.

Excellent. *Muhahaha* I feel like a mad scientist learning this black magic. Definitely bookmarking this to play around with some time.

Good to know about the SVG option. Will be interesting to compare to see how they render compared to TTF, OTF and EOT on the various browsers.

Thanks for this!

Thanks for the elaborate overview. I've known about sIFR , but it was good to learn about the other options that are out there.

Benga creative

Inspired by this post, I built an extension, using eCSStender, to support a simplified @font-face syntax. It's rough right now and probably needs a little work still, but it gets the idea across: http://github.com/easy-designs/eCSStender.font-face.js

Ok guys, if you are willling to beta test, try the new Font Squirrel @font-face kit generator. You upload as many fonts as you want, and it churns out CSS, HTML, EOT, SVG plus your original fonts, all subsetted for the English language. Let me know if you find any bugs. GUI is still under construction.
http://www.fontsquirrel.com/fontface/generator

Thank you for that, great information. Keep your effort up!

Thank you for that, great information. Keep your effort up!

I just visited your web site in Firefox 3.5 (running in Windows Vista), and (presumably due to loading the embedded fonts) it seemed to freeze my whole computer for about 30 seconds (including freezing the mouse). Quite concerning if you are not expecting it. Has anyone else experienced this?

This is a really great article with a lot of useful information for people who would want to give this a go. Thanks for sharing.

@julian... er nope, its fine on mine. But then I'm running XP.. maybe its a Vista issue.

Hey, thanks for the post, I enjoyed reading it, keep up the good work, also had a sneek peek at your portfolio, looking good :)

Great post, you always see rticles based on the @fontface but it never goes into enough detail. great article and il be checking your site more often if you produce posts like this.

Great article, you always see tutorials on @fonface but they never go in to really detail. if this is the quality of posts you offer regularly I'll be back.

great article! It seems everything works great on IE6 that is really a pain when it comes to sIFR and Cufon.

Great read, and becoming a 'Font Embedding Master' is a time worth spent, congratulations.. it's a job very well done..

This is probably THE single best article I have read that summarizes the @font-face attributes to deal with the various browsers. So far I've had to put this information together on my own (and have come to the same result, except for the SVG option, which I just started investigating today).

All's well so far, EXCEPT that I can't get the SVGs to display in CHROME 3.x what-so-ever. I know that SVG should be working, based on the demo here: http://devfiles.myopera.com/articles/751/SVGfonts_in_HTML.html

Any ideas as to why Chrome would not render these out? I also tested it using FontSquirrel, a great site, btw, and it wouldn't work with the font kit provided, either!

I noticed something: you can test if your SVG font works by browsing directly to it in Chrome. I noticed that none of my fonts would display, while other SVG sets I downloaded did in fact work!
I will have to resort to locating fonts that work in SVG as well - I have a strong suspicion that the free fonts I was using had many overlap errors and other issues, and as such didn't export properly to SVG.

Sorry to keep updating in the comments like this - I hope it's not too much.
I identified why some SVG fonts will not render: the all-important DOCTYPE in the SVG file.

FontForge created this DOCTYPE:
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >

This did not render. After downloading and instpecting a working SVG font, it turns out that it did not have a DOCTYPE. After removing the DOCTYPE from my own SVG files, they all render out.

Now, I'm not exactly sure what the implications of this are. Can anyone elaborate on this?

Mike, thanks for discovering this bug!

Great article Jonathan, I've been researching this recently myself. Still on the fence as to whether ill use it or not. Steve Souders does bring an interesting argument.

The fontsquirrel.com @font-face generator now removes the doctype from the svg fonts it renders. I also made sure that all fonts it generates have a proper NAME table. I guess malformed ones are screwing up Firefox.

One thing I noticed with the @font-face tag, is that when you zoom in on text in Safari ( not sure if it's the same in Firefox and such), it blinks for a second.

So let's say you used a special font for your headers (like in your case Jonathan).
- Zoom in, and I noticed that it blinks back to Times for a second before showing the increased size of the @font-face font.

I'm on the latest version of Safari, but it was very noticeable. Not sure if this is because of the way some people use the @font-face tag, or a bug in html5, or simply something in Safari itself, but it's a bit strange :)

Having said that, I can't wait to have this see implemented in all browsers though... the idea of being able to use this tag without fear is very appealing :)

This is awesome @snook, i will be grabbing this for the next project of mine
I really love your design :)

Thx very much.

Thanks for this... This motivates me to use it on my next project

Opera 10 has a strange bug. It only works with one tab open, not with the others. See my little Screenr sceencast:
http://screenr.com/bWN

Fantastic stuff, I've been dying to ditch sFIFR and I have a feeling this will be the push I need. Thanks Jonathan.

@Jonathan: I've already reported that bug to the Opera developers through Mark Pilgrim.

I used this tutorial for my latest project and it worked a charm (although I had to use FontForge as Batik threw an exception for me). Again, thanks.

Is there anyway to do this without fontForge? For the life of me I cannot figure out how to install x11 from the cygwin website site and fontforge does not work without it. Any programs similar to fontforge that can be used? Really dying to try this out.

Letter Spacing is also an issue in Safari 4 at least. If you have a :hover on text with letter spacing the hover will be cut short very slightly.

Thanks! Great to be able to reduce the declaration down to a single statement... my only comment would be to normalize your single and double quotes!

Thanks for adding value to the design community. I've had a chance to look at a few of your post and they have all been spot on.

Wow man that's some great research!
I'll try this out in the near future!

Does this mean that Explorer does in fact support @font-face - but only with EOT font files? I was always under the impression that IE didn't support @font-face at all.

Fyi: Opera Mobile supports @font-face with (at least) TTF fonts as of version 9.7. http://dev.opera.com/articles/view/opera-mobile-9-7-features-standards/. Scroll down to "Web fonts - Web typography just got easier".

Opera Mobile homepage: http://www.opera.com/mobile/

Why do you use sometimes double quotes and sometimes single quotes in your CSS code?? Does that serve any purpose, or just accidentally?

Many thanks,
Wouter Vermeulen

Does this solve the licensing issue? Looking to ditch sIFR

Nice work dude! Thanks a lot! :)

This post changes everything in web design!
Thank you Snook!

With http://www.fontsquirrel.com/fontface/generator it's even easier to generate all files u need. Haven't found any bugs yet.

Thanks for this great article.

What I'm wondering is what to do with different font weights (normal and bold). Do I have to use to separate font-face definitions or is it possible having two different weights in one ttf/eot/svg?

I'm a first time visitor to your site but I was really captivated by your article. I totally thought that font-embedding was one of those CSS tricks I wasn't going to be able to implement for years to come. I'll have to test this out in my next project. Thanks for the introduction!

Great article.

Question: If people have their IE security settings set fairly high, any page that has a @font-face embedded font will make IE pop up a warning dialog stating something along the lines that the page is trying to install something.

Clicking OK allows it to load the fonts on the page, but every page you visit continues to pop-up that warning.

Any suggestions on getting around this warning message (other than telling people to lower their settings)?

BTW: I've tested this on WinXP w/ IE6/7/8 - All give this warning.

I used the EOT tool at http://www.fontembedding.com/eot/ but it doesn't have any additional options (other than specifying the domain to be used).

The example on webfontspecimen.com also displays the message.

I'll have to give TTF2EOT a try. Thanks for the response.