Nice Web Type

Nice Web Type is one place for web typography, following experiments, advancements, and best practices in typesetting web text. Handcrafted by Tim Brown, Type Manager for Adobe Typekit.

How to use CSS @font-face

Code up top for quick reference, details down below—we’ll prepare typefaces for use on the web, go through @font-face CSS line-by-line, and get the experts’ take on browser support. Updated May 2010 with new syntax from Paul Irish.

The CSS:

@font-face {
  font-family: "Your typeface";
  src: url("type/filename.eot");
  src: local("☺"),
    url("type/filename.woff") format("woff"),
    url("type/filename.otf") format("opentype"),
    url("type/filename.svg#filename") format("svg");
  }
@font-face {
  font-family: "Your italic typeface";
  src: url("type/filename-ital.eot");
  src: local("☺"),
    url("type/filename-ital.woff") format("woff"),
    url("type/filename-ital.otf") format("opentype"),
    url("type/filename-ital.svg#filename-ital") format("svg");
  }
h2 { font-family: "Your typeface", Georgia, serif; }
h2 em { font-family: "Your italic typeface", Georgia, serif; }
em { font-style: italic; }

The HTML:

<h2>This headline is typeset in <em>your typeface</em>.</h2>

Before we get started

If you want to brush up history and basics, Håkon Wium Lie has a great introduction to the CSS @font-face property in his A List Apart article, CSS @ Ten: The Next Big Thing. And as always, there are the getting started resources here at Nice Web Type.

Acquire a typeface

You may have a typeface in mind, or you may have no idea where to begin. Either way, read my post about Where to get web fonts. The type you already have may not be licensed right, and whether you’re looking to buy or seeking free fonts, you’ll want to know all of your options.

I have also experimented with several properly-licensed typefaces in a series I call Nice Web Type Likes, providing bits of advice with each example and explaining what I feel are each typeface’s merits.

For this demonstration I’ll use Fontin Sans from Exljbris. If you use it in your example, don’t forget to provide this line of attribution just above your @font-face declaration in the CSS:

/* A font by Jos Buivenga (exljbris) -> www.exljbris.nl */

Go grab a properly licensed typeface, then continue reading here.

Use several font formats

Once you have acquired a typeface, you’ll need to do one more thing: make alternate versions for broader browser support.

Most likely, the typeface you want to use is in one of the following formats: OpenType (OTF) or TrueType (TTF). However, Internet Explorer will only use Embedded OpenType, a format Microsoft has championed for years with little success. And on top of that, other browsers will only use Scalable Vector Graphics (SVG) fonts.

Lucky for us, creating alternate font files is much easier than it once was thanks to the generous genius of folks like Jonathan Snook and Font Squirrel‘s Ethan Dunham.

Jonathan has published two excellent resources: a screencast that explains converting OTF or TTF to EOT, and a blog post that explains how to generate Scalable Vector Graphics (SVG) fonts using a command-line tool called Batik.

Font Squirrel offers an automated way to arrive at the same array of font formats: its excellent @font-face kit generator.

Font Squirrel's @font-face generator interface

This small, free web utility lets you upload a properly licensed typeface, then gives back the same typeface in many formats—plus some demo HTML/CSS files that show the font in action.

Worth noting: one of the generated formats is Web Open Font Format (WOFF), a proposed standard format for web-licensed typefaces. Including WOFF in our @font-face declarations now is a wise thing to do. Progressive enhancement, as they say.

Mac OS X Finder window with Font Squirrel @font-face kit contents shown.

Above, the files I received after having put Fontin Sans Regular and Fontin Sans Italic through Font Squirrel’s generator. Looking good.

Tools vs. “from scratch”

Whether to rely on handy services like Font Squirrel’s generator or roll our own solutions with guidance from smart folks like Snook? We’ll be faced with this decision until using real type in websites is as easy as, say, using images in websites.

As long as we understand how things work, and as long as we know what exactly our handy tools are generating, there’s no shame in using tools that make life easier. In fact, it’s just plain resourceful.

Get yourself organized

Having created versions of your typeface in a few different formats, make a few files and folders just for this tutorial. We’ll proceed as if your project is organized like so:

/My project
  /css
    /style.css
    /type
      /filename.eot
      /filename.otf
      /filename.svg
      /filename.woff
      /filename-ital.eot
      /filename-ital.otf
      /filename-ital.svg
      /filename-ital.woff
  /index.html

Make index.html really simple, like this (line wraps marked »):

<!DOCTYPE html>
<html>
<head>
  <title>Practicing @font-face</title>
  <link href="css/style.css" media="all" rel="stylesheet" »
      type="text/css" />
</head>
<body>
  <h2>This headline is typeset in <em>your typeface</em>.</h2>
</body>
</html>

Get down to business

Now let’s go through the CSS line-by-line and bookmark several excellent reference materials that explain the details thoroughly.

First of all, you may notice that this entire setup looks a little bulky. This is because we’re trying to reach (and avoid tripping up) as many browsers as possible. Go ahead and open up style.css.

Name that typeface

@font-face {
  font-family: "Your typeface";
  src: url("type/filename.eot");
  src: local("☺"),
    url("type/filename.woff") format("woff"),
    url("type/filename.otf") format("opentype"),
    url("type/filename.svg#filename") format("svg");
  }
@font-face {
  font-family: "Your italic typeface";
  src: url("type/filename-ital.eot");
  src: local("☺"),
    url("type/filename-ital.woff") format("woff"),
    url("type/filename-ital.otf") format("opentype"),
    url("type/filename-ital.svg#filename-ital") format("svg");
  }
h2 { font-family: "Your typeface", Georgia, serif; }
h2 em { font-family: "Your italic typeface", Georgia, serif; }
em { font-style: italic; }

Highlighted above are the font-family properties within our @font-face declarations, and matching names within our font stacks. These arbitrary names tie information about our typefaces (file names, formats, locations) to our font stacks, because we use the same name in both places.

Source sauce

@font-face {
  font-family: "Your typeface";
  src: url("type/filename.eot");
  src: local("☺"),
    url("type/filename.woff") format("woff"),
    url("type/filename.otf") format("opentype"),
    url("type/filename.svg#filename") format("svg");
  }
@font-face {
  font-family: "Your italic typeface";
  src: url("type/filename-ital.eot");
  src: local("☺"),
    url("type/filename-ital.woff") format("woff"),
    url("type/filename-ital.otf") format("opentype"),
    url("type/filename-ital.svg#filename-ital") format("svg");
  }

Highlighted above are the EOT versions of our typefaces which must be summoned first, via a separate src property than the others, for reasons Paul Irish explains in painstaking detail.

To paraphrase Paul’s explanation, the logic goes something like this. If a non-EOT file comes first, IE will load the non-EOT file even though it cannot be used, wasting bandwidth and time. Then, IE will choke on the format("whatever") part of the value and ignore the rest of the entire declaration.

All we need to do is put the EOT value first, right?

Not quite. Naturally, as per the CSS cascade, the declaration’s final src property takes precedence. So even though EOT comes first, IE still chokes. Internet Explorer, you magnificent bastard.

So what Paul has devised is a method of intercepting IE before it arrives at “problematic” formats. Using the best kind of CSS hack (one with no meaningless syntax), he diverts IE before it wastes bandwidth grabbing an unnecessary file—and before it chokes.

Think local, act local

@font-face {
  font-family: "Your typeface";
  src: url("type/filename.eot");
  src: local("☺"),
    url("type/filename.woff") format("woff"),
    url("type/filename.otf") format("opentype"),
    url("type/filename.svg#filename") format("svg");
  }
@font-face {
  font-family: "Your italic typeface";
  src: url("type/filename-ital.eot");
  src: local("☺"),
    url("type/filename-ital.woff") format("woff"),
    url("type/filename-ital.otf") format("opentype"),
    url("type/filename-ital.svg#filename-ital") format("svg");
  }

What Paul figured out is that IE chokes on not only local values, but multiple values of any kind within in a single src property.

Following Paul’s advice, our declaration’s final src property features a comma-separated list of values. In browsers other than IE, this series of values attempts to summon the typeface of your choice in several different ways, settling on whichever one works first (and skipping the rest).

Internet Explorer skips this whole line and sticks with the EOT file it has already loaded via our previous src property.

The local values tell browsers to check for your typeface on a visitor’s computer before attempting to load it from afar. Why have two when one will do? As Paul articulates, it’s because some browsers refer to full font names and other browsers to fonts’ PostScript names. John Daggett has tips on how to find these (scroll down to just below “Suffering succotash!”). Paul now recommends bulletproof smiley syntax, to circumvent a few different problems in browsers.

Our next three src values offer up WOFF, OTF, and SVG versions of your typeface. They’re listed in this order so that WOFF, and then OTF, take precedence.

Note that paths to SVG files include an ID. Here, #filename. If you convert your own SVG fonts, you define this value. If you use Font Squirrel’s generator, look at the demo CSS to find this value (for Fontin Sans Regular, I see this SVG ID: FontinSans-Regular).

And with that, you’re done. Preview index.html in a browser and see what you’ve got. Here’s my example using Fontin Sans.

Now don’t get too excited yet. There are some things left to consider, including browser support. Let’s keep talking about this while you still have the files open and are in the zone.

It takes two, baby

One of the most bothersome (but necessary) aspects of the syntax we’re using is that we define the roman and italic versions of our typeface as, technically, two different typefaces when they are actually two different styles of the same typeface.

@font-face {
  font-family: "Your typeface";
  src: url("type/filename.eot");
  src: local("☺"),
    url("type/filename.woff") format("woff"),
    url("type/filename.otf") format("opentype"),
    url("type/filename.svg#filename") format("svg");
  }
@font-face {
  font-family: "Your italic typeface";
  src: url("type/filename-ital.eot");
  src: local("☺"),
    url("type/filename-ital.woff") format("woff"),
    url("type/filename-ital.otf") format("opentype"),
    url("type/filename-ital.svg#filename-ital") format("svg");
  }
h2 { font-family: "Your typeface", Georgia, serif; }
h2 em { font-family: "Your italic typeface", Georgia, serif; }
em { font-style: italic; }

Above is our code. Below, see how it might look with “style linking,” a way of tying @font-face declarations to one another, and to font-style properties, similar to the way we connected values via font-family earlier in this tutorial.

@font-face {
  font-family: "Your typeface";
  src: url(type/filename.eot);
  src: local("☺"),
    url("type/filename.woff") format("woff"),
    url(type/filename.otf) format("opentype"),
    url("type/filename.svg#filename") format("svg");
  }
@font-face {
  font-family: "Your typeface";
  font-style: italic;
  src: url(type/filename-ital.eot);
  src: local("☺"),
    url("type/filename-ital.woff") format("woff"),
    url(type/filename-ital.otf) format("opentype"),
    url("type/filename-ital.svg#filename-ital") format("svg");
  }
h2 { font-family: "Your typeface", Georgia, serif; }
em { font-style: italic; }

See what changed? Instead of specifying a separate font-family name for the typeface’s italic style, we use the same name and connect it to the regular style via font-style style linking.

As a result, we no longer have to specify that em tags within h2 tags should use the italic typeface; by virtue of style linking and CSS inheritance combined, em tags behave as we would expect.

The reason we can’t use this more logical syntax today is because Internet Explorer will ignore it. None of our text would be italicized in IE. Also, Opera would look all messed up.

Browser support

There’s browser support, and then there’s browser support. So far we’ve channeled our inner Paul Irish just to get real type working in browsers that support @font-face!

What about browsers that don’t support it at all? What about older browsers, or some mobile browsers? Well, as per our CSS font stacks, such browsers would see Georgia. Or if they didn’t have Georgia, they’d see a default serifed typeface:

h2 { font-family: "Your typeface", Georgia, serif; }
h2 em { font-family: "Your italic typeface", Georgia, serif; }

Good enough?

If not, and if you would still like to use @font-face where it works, you might try isFontFaceSupported, a bit of JavaScript (again from Paul Irish—this guy is awesome) that checks for browser support. This kind of detection is also available in Modernizr, a JavaScript library from Faruk Ates that checks for all sorts of new features.

If you decide that font stacks are good enough, my Roundup: CSS font stacks post from April may be of interest to you. And although these are not perfect, in their Likes examples I suggest Helvetica to understudy Museo and Museo Sans, and a Lucida Sans stack to understudy Graublau Sans. Crud mitigation.

If you feel zen enough for font stacks but you want to provide slightly different typesetting instructions depending on typeface availability, see Matt Wiebe’s links near the end of our chat.

Optimization

Arguably part of browser support are subtleties like typeface file compression, flashes of unstyled text (FOUT) in some browsers and, in other browsers, @font-face only working if typeface files live at the domain where they’ll be used. I believe these have more to do with general web logic. Same goes for using @font-face with theme customization via services like WordPress and Tumblr.

Such nuanced issues have everything to do with how files are transmitted and parsed, and they deserve a comprehensive post. Until I have such a post to share, here are some links:

Cross-Origin Resource Sharing
“Firefox 3.5 has set a precedent: it only fetches your web fonts, when linked from other sites, if you have expressly set your server to allow it.” This page from the Open Font Library explains how to set your server to allow it, via .htaccess, either in general or on a per-site basis.
Fighting the @font-face FOUT
Solutions from Paul Irish that tell Gecko and Opera to give font files high priority upon page load.
Steve Souders on @font-face and Performance
Steve Souders details the myriad performance issues and usability hurdles incurred by pages that use @font-face, then recommends a solution he calls, “Lazy Load.”
Gzip your @font-face files
Among the stats, bits of advice: “Always send your font files gzipped” and “keep an eye on the font file sizes you’re about to use, they can be huge.”
@font-face gzipping – take II
Stoyan Stefanov: “Basically, the tests confirm that WOFF is already compressed, it doesn’t need to be gzipped by the server and woff file sizes is comparable to the compressed TTF or OTF.”
Rendering Fonts in Today’s Browsers
Ryan Carver: “We recently rolled out an upgrade to that Javascript which improved compatibility, rendering perception and reduced the file size tenfold. There’s more to come – for example, we’re adding hooks which tell you when the fonts have loaded.”

The spec, the future

There are all kinds of @font-face goodies on our horizon, and it’s all because of forward-thinking people who make browsers, sell type, and care about design. Progress amid changing business.

CSS Fonts Module Level 3
The official W3C Editor’s Draft.
WOFF in Firefox 3.6
John Daggett of Mozilla announces upcoming WOFF support in Firefox and details differences between WOFF and TTF/OTF, with great examples.
New font control features for designers
Editable via CSS – OpenType features like discretionary ligatures, alternate glyphs, tabular figures, fractions, and language sensitivity. Mozilla’s John Daggett and Jonathan Kew are planning to extend the CSS font-variant property, beginning in Firefox 3.7.

Keeping up

Thanks for reading. One final note: stay abreast of web typography links like the ones cited here with Nice Web Type’s bookmarks. Also on the homepage and in the iPhone-friendly stream.

One more thing

Much respect for Jon Tan’s excellent post, Making Web Fonts Work. Published 364 days ago, this investigative, ahead-of-its-time post got lots of people thinking realistically about web fonts. Now Jon’s prescience fuels Fontdeck—can’t wait to see it.

137 comments

  1. Matt Wiebe 30 Oct 2009

    The mothership has landed. Great work compiling all of this Tim.

    The one question I keep asking is about the ordering of WOFF, SVG and OTF/TTF fonts in the non-IE part of the @font-facedeclaration. From the W3C spec:

    When a font is needed the user agent iterates over the set of references listed, using the first one it can successfully activate.

    If that’s the case, I would propose the the ordering should be WOFF, OTF/TTF, SVG, rather than WOFF, SVG, OTF/TTF as is currently making the rounds. SVG should be our last resort, as 1) it’s always going to be a converted file with possible imperfections and 2) it creates the largest file sizes of the bunch. I don’t want a browser that supports WOFF or OTF using SVG.

    I’m using this syntax on thatwasnotok.com and it seems to be playing nicely.

  2. Tim Brown 30 Oct 2009

    Makes sense to me. What I read somewhere is that some browsers (Opera?), which understand both SVG and OTF, would botch the OTF but render the SVG correctly. Having looked at your thatwasnotok syntax in Opera, I can’t replicate this problem.

    The syntax here has been updated. 1) WOFF, 2) OTF, 3) SVG.

  3. The Font Squirrel 30 Oct 2009

    @Tim – Great job here. This stuff is complicated and really needs to be nailed down. Some day we’ll look back on these days and laugh at the ridiculousness of it all. -Ethan

  4. Eric Fields 30 Oct 2009

    Its hard to justify all the work required for this sort of nearly-bulletproof @font-face implementation. I’m mostly content with ttf or otf knowing only FF and Safari users will see it.

    This mostly stems from my unfair assessment that the opinions of IE users don’t matter to anyone.

  5. Paulo Pereira 30 Oct 2009

    @Tim @Matt Wiebe: I agree with the TTF/OTF before SVG.

    Actually, yersterday I was setting a masthead using League Gothic from the Font Squirrel @font-face kit, and they use SVG before TTF/OTF. I’ve found that Webkit-based browsers (Safari4, Chrome and Webkit Nightly) have glitches when SVG is placed before the TTF/OTF. The type got misaligned. Then I put the TTF/OTF first and everything got OK.

    And Opera 10 was fine using either way.

    Thanks for the post :P

  6. The Font Squirrel 30 Oct 2009

    I’ve been so busy with the actual conversion process, that I didn’t explore the best way to do the CSS. I will take @Matt’s advice and change the output of the Font Squirrel Generator.

  7. Ryan Carver 30 Oct 2009

    Great roundup, Tim. Keep it coming!

  8. Roderik van der Veer 31 Oct 2009

    Very nice roundup of the entire font-face system. I’ve played with the version without the WOFF format a while back with the packs from FontSquirrel but i had font rendering issues on Windows (Firefox), but not on Ubuntu… Like the middle dash of the e that goes missing etc. No google search query had any similar problems but several computers in our office confirmed this problem. It was not at all font sizes. Did you ever encouter issues like this in your tests?

  9. Andreas Fritsch 1 Nov 2009

    To my mind there is only one font.svg necessary. You can copy the italic file in the first, because you use the id.

    url(“type/filename.svg#filename”) format(“svg”);

    url(“type/filename.svg#filename-ital”) format(“svg”);

  10. The Font Squirrel 3 Nov 2009

    @Roderick-

    I know about this issue… It is multi-faceted… Part of it is that the font you likely converted was an OTF file. The second reason had to do with the lack of hinting that was added with the conversion. I’m working this problem out slowly. Rendering will improve with the generator later today.

  11. Marco 3 Nov 2009

    Very interesting and complete post.
    Thanx!

  12. Sandra Mello 4 Nov 2009

    Thanks for the overview, and thank you commentators.

    Is there a reason not to serve conditional style sheets to Explorer, including IE 8?

    I was thinking this could circumvent specific font weirdness by specifying different fonts.

  13. Jason Holland Design 15 Nov 2009

    Great post, thank you!

  14. Simon Lachance 3 Dec 2009

    Merci!
    Epiphany this morning!
    I was waiting for this for years. Thank you for explaining it so clearly!

  15. Sam Rayner 8 Dec 2009

    Thanks a lot for this Tim. I bookmarked when you first posted it knowing it would come in handy!

    One question: You mention using font-style to save giving variants of a font different names (once IE and Opera support it). What font-style would you suggest for a bold italic face? Two separate font-style declarations (one for each) or something like font-style: bold italic;?

  16. Sam Rayner 8 Dec 2009

    What am I talking about? Of course you’d use font-weight not font-style for a bold face. I appear to be going a bit mad, please ignore me. :)

  17. Tim Brown 8 Dec 2009

    Thanks Sam, haha.

    Right, as support for the CSS Fonts Module Level 3 Working Draft grows, we can use what they call “font matching” (I’ve heard it called “style linking”) to associate @font-face declarations with the CSS rules in which our typefaces are used.

    So for a true bold italic typeface (not a bold typeface we’d like to pseudo-italicize, nor an italic we’d like to embolden), we can do something like this:

    @font-face {
      font-family: "Your typeface";
      font-style: italic;
      font-weight: 700;
      src: url(type/filename-boldital.eot);
      ...
      }

    Then, if our typeset text (roman) happened to include a strongly emphasized phrase inside an emphasized phrase, our true bold italic face would be used without having to be explicitly targeted at strong tags within em tags. Style linking and CSS inheritance would do the trick.

  18. Mark Kane 17 Dec 2009

    Anyone had or heard of issues with IE and modal iframe windows with @font-face. I’m having an issue where when my modal window comes up, the font I’m using is working but when I click on one of my links loading in that window the font reverts to Helvetica and continues to do so if you go back and even if you close the modal (it reverts the index page’s font as well!?). Any help would be appreciated.

  19. Muhammad Usman Arshad 21 Dec 2009

    Nice post, this is very useful article, I have test and this is working fine here is the link of my used font face syntax.

    thanks for the nice post.

  20. Stacey 5 Jan 2010

    I’m very new to web design. Still attending CC for my certificate. I have an html doc that dreamweaver was used to create & has some inline css for the fonts chosen. Font in a red suit for 1st choice in size 36 no headings, 2nd choice is papyrus bold no headings for the title. I have a small amount of text that I only want to be in papyrus bold. I can’t seem to figure out where to place the @font-face code etc. or what exactly it should be, even after reading & re-reading every single piece of info on the web. I think I might need someone if at all possible to look at my code. I used the drag & drop features of dreamweaver to create it, because I am just not good enough at writing the html yet. I can’t use external style sheets because this is for en ebay template. eBays system is copy & paste for html. So once again my css is inline. I’ve tried dropping the font files into the font generator from fontsquirrel , but just keep getting an error with a red X in a box. Some of my text was done in photoshop because that text wont ever change so I made it part of the images. But some text will need to change on a reqular basis, & also needs to be searchable through tags in eBays system so it can’t be an image. How can I find out what the exact code should be & where to place it in the html doc? Thank you for any assistance! Stacey

  21. stacey 5 Jan 2010

    Update, finally got the font squirrel to generate the zip files, but when I open the demo.html the font doesn’t display correctly. When I try to open the .eot file it wont open in IE, neither will the .svg or the .woff, only the tff opens in firefox & displays correctly. Not sure what to do with the css files, except maybe copy the code into my html file, but where to place it exactly, since I’m using inline I’m not sure? Thank you for any assistance, Stacey

  22. Tim Brown 5 Jan 2010

    Hi Stacey,

    I think I might need someone if at all possible to look at my code. I used the drag & drop features of dreamweaver to create it, because I am just not good enough at writing the html yet.

    Untangling Dreamweaver code is a frustrating experience. I suggest that you instead spend time learning to write HTML by hand. I learned a lot from the resources in getting started.

    I can’t use external style sheets because this is for en ebay template.

    Inline styles can’t make use of @font-face because they’re effectively attached to a specific selector—they’re inside the style attribute of a specific tag.

    If you can’t use an external stylesheet, you’d have to be able to add an embedded stylesheet at the top of the HTML document, declare @font-face typefaces there, and then summon them either from your inline styles or (preferably) from the embedded stylesheet.

    Hope that helps!

  23. Dena 5 Jan 2010

    Even thought some old versions of IE doesn’t support it, i’ll make sure that i use this technique with clients that sometimes think outside the box :)

  24. Jenn 15 Jan 2010

    I am still confused by the need (or not) for additional font specifications. If I have defined and loaded each variant of a font with a unique name (FontA, FontAItalic, FontABold, FontABoldItalic) won’t also specifying the individual font variables to describe it in the CSS result in a double rendering of the style or weight?

    That is, if I have set FontAItalic by loading the separate, already stylized, version of the font (i.e., FontAItalic.ttf versus FontA.ttf), do I still need to also specify the CSS attribute font-style: italic;? Won’t specifying the additional attributes with the regular CSS code result in the already italic font (FontAItalic)being additionally italicized or the bold font (FontABold) being rendered additionally bold (i.e, bolder?)

  25. Tim Brown 17 Jan 2010

    Jenn, that’s a great question!

    This practice isn’t supposed to result in super-italicizing or super-emboldening, as per CSS Fonts Module Level 3 Working Draft. However, sometimes it does. All we can do is wait for browsers to support font matching consistently.

  26. deirdre 28 Jan 2010

    you rock! no really, you are a lifesaver!

  27. macdet 29 Jan 2010

    @lifesaver!

    Great stuff. thx for sharing. I still learn old fashined css. This is a big step forward!

  28. John Grimes 6 Feb 2010

    Have you checked out TypeFront?

    We’ve gone one step further and created a hosting platform for font embedding that allows you to specify which sites are allowed to embed the font you’ve uploaded.

    Sellers can also use the platform API to distribute their fonts.

  29. Tony 12 Feb 2010

    Very nice post, just found out about @font-face looking forward to putting it to use within my blog.

  30. leq 24 Feb 2010

    how if i got more than two font-face and i need to apply on the body text.So, how i going to apply on the html?

  31. Jim 24 Feb 2010

    Many thanks for this – It’s just what we need. I’m having issues though – Following this the only browser it works on is IE.

    FF, Safari, Opera, Chrome etc don’t work. Any ideas what I’m doing wrong?

    Thanks Again.

  32. Mars 5 Mar 2010

    I was hoping for such an improvment. Now I use it on mxl87.com It works perfectly on my Iceweasel, I assume it should on Firefox then. I tried with Opera, no problem either. IE 4Liunx doesn’t get it and my girlfriend’s Camino and Safari couldn’t work it out.

    Same question as Jim, any leads about what could be missing ?

  33. Brett Jankord 5 Mar 2010

    Great write up, took a while to read through it all but it was nice to have such detail. I’m excited to start trying these techniques out. Thanks!

  34. ioni 5 Apr 2010

    Hm…
    I still prefer using instead of embedding right away

  35. Eva 11 Apr 2010

    I love it honestly. I was so sick of using sIFR that @font-face is like a glass of cold water in the desert :)

  36. new trailer 18 Apr 2010

    I was looking for something. Thanks for sharing dude. Keep it up..

  37. Rob 27 Apr 2010

    CSS is very powerful as you can see. If you know how to do it right… I prefer doing everything frome “the source”… Thanks for great post.

  38. wingnutart 30 Apr 2010

    Like writing css? Make a PRINT.CSS File!

    Hate to be old school but having a print out is super helpful when I’m working; and attaching a print stylesheet is super easy. I’d recommend ALA’s print stylesheet as a guide (as it prints the link src’s).

    Thanks for the excellent write up – I’ll be following your thoughts!

  39. spor 1 May 2010

    Thanks for sharing, ı will try it

  40. Devsigner 18 May 2010

    Nice article, have referenced it in my blog post.
    Still not ready to make the jump to font-face for all situations though.

  41. Fraser Ntukula 26 May 2010

    Hey, thanks for this awesome article… @font-face is pretty useful as it is.

    But when browsers get their support standardized, that’s when it’ll get even better!

  42. Valerie 26 May 2010

    Jim, I’m having the same problem – it’s only visible in IE (though that’s quite cool!).

    The only thing I know that I did differently from the example is: since my host won’t let me load the font file types, I loaded them on a different server and used the full url as the source. Did you do it that way?

  43. Valerie 26 May 2010

    I found away around it – in FontSquirrel, click “expert”, choose just the subsets of characters you need, and then choose “Base64 Encode”. That encodes the whole font in your stylesheet.

    Now it’s visible in Firefox as well as IE, and I presume the other browsers…

    I wonder how it works with slower connections?

  44. travesti 1 Jun 2010

    travesti, travestiler, türk travestiler, travesti sitesi, trv, travestitc

  45. Article Directory 6 Jun 2010

    Wonderful tutorial ! I will be a good coder with the help of this site. :)

  46. Vesa 10 Jun 2010

    Excellent article. Lots of useful information for people new to @font-face. Thank you. Now on to clashing heads with the infamous FOUT.

  47. Oto Kiralama 17 Jun 2010

    I was looking for something. Thanks for sharing dude. Keep it up..

  48. Koray küp taş 27 Jun 2010

    Küp taş, küptaş, granit küp taş ve granit küptaş bizden alınır.Tokyap Granit küp taş.

  49. LEVIS 2 Jul 2010

    can everyone help to hide @font-face in css? because it doesnt validate….i tried include it with help of javascript, but had problems with IE, thnx!

  50. Jennifer R 15 Jul 2010

    I’ve a question: was font-face supported by IE 6, 7 or 8?

  51. Scott Murray 22 Jul 2010

    Thanks for this great resource! One note: Under “It Takes Two, Baby”, at the end of the first chunk of sample code, I think you may not have meant to include this line: em { font-style: italic; }

  52. Scott Murray 22 Jul 2010

    Oops, no, I think I get it now.

    h2 em { font-family: "Your italic typeface", Georgia, serif; } sets H2 em spans so they will use your special, font-face font (if available to that browser).

    em { font-style: italic; } is just your fallback, so browsers know to italicize per default behavior, just in case the pretty font-face font isn’t working.

  53. Aëro Dylan 1 Aug 2010

    Thanks a lot Tim, you have really helped a lot people go with the flow. Now, the @font-face idea, is completely awesome and rad, but I’m having a problem, and I hope that you can help me fix it.

    I have this code:
    body {
    background-color: #71A6D2;
    }

    @font-face {
    font-family: 'QuicksandLight';
    src: url('type/Quicksand_Light-webfont.eot');
    src: local('☺'), url('type/Quicksand_Light-webfont.woff') format('woff'), url('type/Quicksand_Light-webfont.ttf') format('truetype'), url('type/Quicksand_Light-webfont.svg#webfontxOK7zMuM') format('svg');
    font-weight: normal;
    font-style: normal;
    }

    @font-face {
    font-family: 'QuicksandLightOblique';
    src: url('type/Quicksand_Light_Oblique-webfont.eot');
    src: local('☺'), url('type/Quicksand_Light_Oblique-webfont.woff') format('woff'), url('type/Quicksand_Light_Oblique-webfont.ttf') format('truetype'), url('type/Quicksand_Light_Oblique-webfont.svg#webfontvBgqc5bU') format('svg');
    font-weight: normal;
    font-style: normal;
    }

    @font-face {
    font-family: 'QuicksandBook';
    src: url('type/Quicksand_Book-webfont.eot');
    src: local('☺'), url('type/Quicksand_Book-webfont.woff') format('woff'), url('type/Quicksand_Book-webfont.ttf') format('truetype'), url('type/Quicksand_Book-webfont.svg#webfontQvsv8Mp8') format('svg');
    font-weight: normal;
    font-style: normal;
    }

    @font-face {
    font-family: 'QuicksandBookOblique';
    src: url('type/Quicksand_Book_Oblique-webfont.eot');
    src: local('☺'), url('type/Quicksand_Book_Oblique-webfont.woff') format('woff'), url('type/Quicksand_Book_Oblique-webfont.ttf') format('truetype'), url('type/Quicksand_Book_Oblique-webfont.svg#webfontDkcdglAy') format('svg');
    font-weight: normal;
    font-style: normal;
    }

    @font-face {
    font-family: 'QuicksandBold';
    src: url('type/Quicksand_Bold-webfont.eot');
    src: local('☺'), url('type/Quicksand_Bold-webfont.woff') format('woff'), url('type/Quicksand_Bold-webfont.ttf') format('truetype'), url('type/Quicksand_Bold-webfont.svg#webfontA4fKbYnS') format('svg');
    font-weight: normal;
    font-style: normal;
    }

    @font-face {
    font-family: 'QuicksandBoldOblique';
    src: url('type/Quicksand_Bold_Oblique-webfont.eot');
    src: local('☺'), url('type/Quicksand_Bold_Oblique-webfont.woff') format('woff'), url('type/Quicksand_Bold_Oblique-webfont.ttf') format('truetype'), url('type/Quicksand_Bold_Oblique-webfont.svg#webfontijreB3Ak') format('svg');
    font-weight: normal;
    font-style: normal;
    }

    @font-face {
    font-family: 'QuicksandDash';
    src: url('type/Quicksand_Dash-webfont.eot');
    src: local('☺'), url('type/Quicksand_Dash-webfont.woff') format('woff'), url('type/Quicksand_Dash-webfont.ttf') format('truetype'), url('type/Quicksand_Dash-webfont.svg#webfontcuKfewST') format('svg');
    font-weight: normal;
    font-style: normal;
    }

    div #head {
    font-family: "QuicksandLight", Arial;
    }

    which is my CSS Code, and this is my HTML Code:

    The problem that I can’t seem to fix, is that I can’t get the font to even look like Arial, a common web-safe font, and it looks like I “lined” everything up correctly, and I have all the latest browsers.

    Please Tim, can you help me?

    Thanks,
    Aëro

  54. Mike Barron 3 Aug 2010

    Just what the doctor ordered. Thanks a bunch!

    -MikeB

  55. soema 19 Aug 2010

    Thanks to you I got this valuable script information. This post is different from what I read on most blog. Thanks for sharing this good info.

  56. daneru 23 Aug 2010

    Hi Sir, I just want to ask for any help or advice with regards on how to make my fonts appear.

    I followed every step in the above mentioned post. But it doesn’t seem that I am getting it all right.

    I don’t know much of HTML and CSS so i tried to copy formats from several websites including yours that uses embedded fonts.

    I would really appreciate your help. Thanks.

  57. poolenclosures 25 Aug 2010

    Your give me something valuable things to share and I also relying on electronic signature like your site because it was the mst easiest and convenient to use. Looking forward to reading more from your blog as well.

  58. sports jerseys 27 Aug 2010

    Writer has a deep understanding and a great vision of where the industry is going. He is a real professional and wonderful to interact with. And this article is definitely someone who gets things done!

  59. Never 28 Aug 2010

    Hi. Have some troubles with сyrillic in ie6. Other browser work properly but in ie6 all сyrillic words are translated to “squares”. What am I doing wrong?
    The font is “GeorgiaRegular”.
    And thanks for the article and service – it is greate ))

  60. Adam 31 Aug 2010

    Thanks heaps for the very detailed tutorial on @font-face embedding. This is really a one stop shop and I will be keen to read the rest as soon as I get a sec.

    I have downloaded a font package from font squirrel and I am very excited to get stuck in and see what this can do for my clients.

    I am a website designer from Sydney Australia and I believe that this is the beginning of the next great thing on the web – typography. I never thought I would get to say that. Typography on the web – not just images but live, indexable, beautiful text.

    Thanks again,

    Adam.

  61. Janice 3 Sep 2010

    Awesome! you are the MAN!

    THANK YOU!

  62. Julian 7 Sep 2010

    Hey Mark Kane,
    I have the same problem with IE 8. I have fonts download and display properly in the parent window, but when the page within an iFrame downloads it’s own fonts, the fonts in the parent revert to some other font, and not always the default font either. It goes all wonky in typical IE style.

    I found this happens less if you use Google’s API Stylesheet method instead of their javascript method for loading fonts. And the problem goes away entirely if you load the all the fonts in the parent. This later fix will only work though if you can know all the necessary fonts that appear within the pages that load in the iFrame.

    Anyone know how this can be fixed?

  63. Düzce 8 Sep 2010

    I was looking for something. Thanks for sharing dude. Keep it up..

  64. Buca Etüt Merkezi 8 Sep 2010

    Thanks for theme

  65. Ivan Razine 10 Sep 2010

    Thanks! I’ve been having so much trouble with @font-face embedding I almost thought it was useless!

  66. shyel 13 Sep 2010

    useful css script. Thank you for your post. Very Glad that you shared this to us. It’s some pretty great info. Valuable information I found, keep on posting.

  67. isalute 23 Sep 2010

    Awesome tips. THANK YOU!

  68. termal jel 24 Sep 2010

    ben bunu hemen deniyorum saol

  69. otsamir 25 Sep 2010

    informasi yg sangat berguna.
    thank you for sharing
    awesome

  70. wynat 29 Sep 2010

    Valuable blog article, it was quite interesting nice work. I want to thank you for this informative read, I really appreciate sharing your post. This is my great pleasure to visit your website and to enjoy your excellent post here.

  71. su bayileri 30 Sep 2010

    I was looking for something. Thanks for sharing dude. Keep it up..

  72. Essex Website Design 30 Sep 2010

    This really helped me, picked up a few new bits from reading this, thanks.

  73. Haley 1 Oct 2010

    I’m hoping someone can help me with this problem I’m having with using @fontface for my blog. I generated .eot, .svg, .tff, and .woff files using font squirrel. I have the following code:

    @font-face {
    font-family: ‘PeaShelleyBelleyRegular’;
    src: url(‘peashelleybelley-webfont.eot’);
    src: local(‘☺’),
    url(‘peashelleybelley-webfont.woff’)
    format(‘woff’),
    url(‘peashelleybelley-webfont.ttf’) format(‘truetype’),
    url(‘peashelleybelley-webfont.svg#webfont4I357Jzn’) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

    I have tried to update my blog using .post h3 {font-family: “PeaShelleyBelleyRegular” but it doesn’t work! The font does change, but not to the correct font I want to use…please help! Thanks in advance :)

  74. Simon Battersby 6 Oct 2010

    Great article, thanks. This seems excellent in all of the common browsers with the exception of Opera 9 which doesn’t support @font-face.

    I’m curious to know how IE9 will work with the css “smiley” construction, given that it should support @font-face natively.

  75. XHTMLTEAM 11 Oct 2010

    Good work! Thanks for sharing..

  76. shina 11 Oct 2010

    This is a great post, thanks to you I got this information. I appreciate your work, thanks for taking this opportunity to discuss this, the post is really helpful and it have so many new valuable things to learn. Thanks for sharing this article. Pretty good post.

  77. jonathanrlively 12 Oct 2010

    Hi all, wondering if anyone else has run into this problem:

    @font-face works fine if my .html, .css and font files are all in the same directory but, if I try to use a relative link to a different font directory from my .css file, the font will not load at all. I know it’s not a syntax error, as I’ve tested and retested all day now. Wondering if this is a firefox problem. I’m using version 3.6.10. Any help would be greatly appreciated. Thanks

  78. Sijan Khadka 15 Oct 2010

    Brilliant article! Just saved my day.
    Thanks a lot for sharing.

  79. Migraine Treatment : 30 Oct 2010

    i always love to wear sports jerseys because they are cool and sporty _

  80. home weight machines 1 Nov 2010

    a nice choice with 57.99% of Unix, 93.17% of Mac and 98.05% of Windows machines supporting it. There are quite a few others that could be of interest when doing branding w

  81. Dan 2 Nov 2010

    no postscript font???

    WAT!

  82. Andrew 4 Nov 2010

    Shame that I can’t seem to get this to work.

  83. Watches Shopping 6 Nov 2010

    This really helped me, picked up a few new bits from reading this, thanks.

  84. Anhängerkupplungen 8 Nov 2010

    DAnke für die informationen

  85. Treppenlift 8 Nov 2010

    danke.

  86. 1z0-514 11 Nov 2010

    I’m a little confused by this article. You are talking about web safe fonts but you display the fonts using images. How safe can they be if you have resorted to using them in images instead of simple HTML. Could it be that they are not web safe and that they really don’t look very nice at all.

  87. Honorarberatung 12 Nov 2010

    for the frist time I prefer doing everything frome “the source”… and Thanks for the article

  88. Web Design Hull 15 Nov 2010

    Very helpful, was just looking into the various options for using fonts and this article is great… thanks!

  89. agri dagi 16 Nov 2010

    Just what the doctor ordered. Thanks a bunch!

  90. Webstandard-Blog 16 Nov 2010

    This kind of font embedding is one of the things in web trends the last few years. Thx for sharing this small but helpful @font-face tutorial!

  91. Stomach Gas Bloating 18 Nov 2010

    sports jerseys that uses cotton and polyester fabric are much cooler to use ~,`

  92. plattformaufzug 18 Nov 2010

    Thx for sharing this small but helpful

  93. Stuhllift 18 Nov 2010

    thnak you

  94. zaun 18 Nov 2010

    ok thank you

  95. Free Cartoon Wallpaper 20 Nov 2010

    This is a great post, thanks to you I got this information. I appreciate your work, thanks for taking this opportunity to discuss this, the post is really helpful and it have so many new valuable things to learn. Thanks for sharing this article. Pretty good post.

  96. Joyeria 20 Nov 2010

    kind of font embedding is one of the things in web trends the last few years. Thx for sharing this small but helpful @font-face tutorial!

  97. Webdesign Bayern 23 Nov 2010

    I have searched a long time for an article, which explains, how i can use the @font-face in CSS. Thanks for that article, which is easy to understand :-)

  98. SHAWNLEE 27 Nov 2010

    Very helpful, was just looking into the various options for using fonts and this article is great… thanks!This is a great post, thanks to you I got this information. I appreciate your work, thanks for training course taking this opportunity to discuss this, the post is really helpful and it have so many new valuable things to learn. Thanks for sharing this article. Pretty good post.

  99. tuz 1 Dec 2010

    Very nice post, just found out about @font-face looking forward to putting it to use within my blog…

  100. CISA 2 Dec 2010

    I was wondering for this collection, but now i got it. Thanks and congrats for such a wonderful article.

  101. Yuojizz 2 Dec 2010

    for the frist time I prefer doing everything frome “the source”… and Thanks for the article

  102. carpet cleaner jacksonville 4 Dec 2010

    This is such a great resource that you are providing and you give it away for free. I love seeing blog that understand the value of providing a quality resource for free.

  103. treppenfahrstuhl 6 Dec 2010

    Thank for informationen on the blog.

  104. treppenfahrstuhl gerade 6 Dec 2010

    danke für die information.

  105. treppenfahrstuhl kurvig 6 Dec 2010

    danke.
    schöne seuite

  106. Heroticos 8 Dec 2010

    for the frist time I prefer doing everything frome “the source”… and Thanks for the article

  107. John Dixon 10 Dec 2010

    Excellent article, thank you.

    I’ve decided to use Conditional Comments to serve the @font-face font families to modern browsers (including IE9, as the beta seems happy with them, and with font formats other than EOT), while still serving the individual @font-face EOT fonts and the more specific CSS rules to IE8 and older.

    My CSS is pretty modular, so it’s not too much hassle to do, and means it’ll be easier to drop EOT fonts for older IEs at some point in the future. The main plus is that it also makes the management of the bold, italic and bold italic font variants so much easier!

    Just a suggestion – it’s probably better to build the weights of the @font-face families using numerical values (400 being normal and 700 being bold), as it just makes it easier to build up larger font families if you do ever use them.

    Also, I think you need ‘@charset “UTF-8″;’ at the beginning of the CSS file if you’re saving double-byte characters like the smiley.

  108. Herrenschuhe 20 Dec 2010

    tried this a bit and finally got it to work thanks a lot for this guidelines…

  109. Hip Hop Girl 20 Dec 2010

    Cool, my boyfriend told me about this new feature of CSS @font-face. Thanks for give the tipps here

  110. Alex 21 Dec 2010

    Very helpful, was just looking into the various options for using fonts and this article is great… thanks!|| 70-541 || 70-542 ||

  111. Iphone Spy App 27 Dec 2010

    Brilliant blog posting. I found your post very interesting, I think you are a brilliant writer. I added your blog to my bookmarks and will return in the future.
    Mark @ Iphone Spy Software

  112. Saltwater Aquarium 30 Dec 2010

    Alex, what exactly is are the numbers in your comment. I’ve never seen that before.

  113. Francy 31 Dec 2010

    Wow I never saw such a detailed tutorial about css font-face. Thanks for sharing it and putting it down so clear. In some of my projects I have used Google fonts which is another good alternative, not many fonts available at the moment but some of them are really cool.
    realizzazione siti web
    posizionamento motori di ricerca
    hotel abano terme
    prestiti cambializzati
    assicurazione auto
    Anyway definitely I will try to implement this solution on my next work.

  114. Kira Sherrine 3 Jan 2011

    @Aero Dylan

    I hope this is not late but…

    Arial will not work because you first specified “Georgia”… Arial is a fallback font in case Georgia does not work… like 2nd in command.

    If you want Arial to come in some texts like.. header or post. Then it would be the first thing that you list in the font family.

    The point of @Font Face is for Font Types that are not listed in computers to be used for web purposes across browsers (Mainly).

    So you have to reword your style.css

  115. rollstuhllift 6 Jan 2011

    danke für den rolli lifter

  116. Saltwater Aquarium 7 Jan 2011

    I used this little tip on my website (see my name) to style up a couple of headers. thanks.

  117. CCW 11 Jan 2011

    I have followed these instructions, but am still not seeing my font in Firefox. Works great in Safari, check it out: http://eyeballs.co/eyeballs.html

    Can anyone help?

  118. Web Developer 13 Jan 2011

    This doesnt seem to be cross-browser compatible which is a great shame as a web developer myself I want to use non-standard fonts but need to know they work on all browsers.

  119. mehmet 15 Jan 2011

    thank you perject.

    forumaden.com

    forumaden.com/blog

  120. Rosastef 16 Jan 2011

    Hi,
    could it be that a number within your chosen font name might ruin things?

    I used to have:
    @font-face {
    font-family: “Museo300″; ….

    and nothing worked. I tried to change it to:
    @font-face {
    font-family: “Museo”; ….

    and it worked immediately. Just wanted to point that out :)

  121. Post Pregnancy Tummy 20 Jan 2011

    I was also able to use this with great success… check out the site and see for yourself. If I can do it, anyone can.

  122. attending community college 21 Jan 2011

    Your post is rocking and knowledgeable. I really appreciate the way you write to mention nothrow/NS_OK-always . It is pretty big . I would like to read more from you.

  123. Roossien 21 Jan 2011

    The code works… but it doesn’t pass the w3 CSS Validator with css 2.1 profile. Is there a way to get the code be accepted by the validator?

  124. Adjustable Dumbbells 25 Jan 2011

    ,’~ I am really thankful to this topic because it really gives useful information ~-.

  125. Rechtsanwalt 26 Jan 2011

    danke für die fachkundige auskunft

  126. Jewelry Shopping 26 Jan 2011

    Your article very helpful for me.. thanks for sharing..
    Diamond Engagement Rings | Laptop Review | Sport Equipment

  127. Cisco 28 Jan 2011

    Candidates need to obtain CCNA and CCIE certifications for the cause that essential requirement for acquiring this certificate.

  128. 640-802 28 Jan 2011

    Prerequisites for CCNA tone of voice certification consist of a trustworthy CCIE certification or CCNA Certification.

  129. San Diego Flower delivery 29 Jan 2011

    i just want to thank you for sharing your information and your site or blog This Is Simple but nice article I’ve ever seen i like it i learn today … Something

  130. limited formation uk 29 Jan 2011

    I appreciate your work, the post is really helpful. It’s some pretty great info, I appreciate the information you provided is excellent post. Thank you.

  131. Pariuri sportive 29 Jan 2011

    It’s a great pleasure reading that you posted here.It has a full of information, which I am looking for and I love to post a comment that “The content of your post is awesome”. Great work

  132. shinra 30 Jan 2011

    This is very interesting, You are a very skilled blogger. I have joined your feed and look forward to seeking more of your post.

  133. fashion jewellery online 30 Jan 2011

    This would be so good to see with the students. I think all students should have access to the internet. There is so much great information for the students on the internet. Teachers can put lesson plans and homework on the internet for the students. This so good to see.

  134. Akash pandya 31 Jan 2011

    This is very interesting, You are a very higher skilled web design. I have joined your feed and look forward to seeking more of your post.

  135. pupuk organik 4 Feb 2011

    I recognize your work, the post is admittedly helpful. It’s some fairly nice info, I admire the data you supplied is superb post

  136. Maglie 5 Feb 2011

    Thanks I’ve wanted to know how to do this with css for some time now. I looked about but couldn’t really find what I was looking for until I came here. There’s a crude guide on this web design related site, but nothing as good as what you’ve got here.

Twitter: @nicewebtype
Dribbble: timbrown

Combining Typefaces

 

I wrote a small book about combining typefaces. Buy it for less than the cost of a fancy beverage.