home

font-face and Webfonts: How To Use Them


Friday, September 11th, 2009

Trying to be exaustive the article got a bit long but it is worth the reading. In the first part I explain the history of webfonts and what is probably going to happen next. In the second part I explain what @font-face is and how to use it.
Feel free to jump at the chapter you are most interested with these links:
I – Webfonts, introduction and solutions
II – @font-face, how to use it

Helvetica_Lars_Williem_Veldkampf.jpg
foto: © Lars Williem Veldkampf (photostream)

Introduction to webfonts:

When it comes to web design typography is a problematic subject. Since always designers have been limited to use those so called web-safe fonts.
When specifying typefaces in font-family property within a stylesheet you tell the browser to use that font to render the html text the property refers. As different OS have different standardly installed fonts we, as designers, were forced to use those more common and known to be available to the majority of visitors (remember that the browser seek for the font on the local machine of the visitor).
That’s also why we write stacks of fonts and not only one: we try to ensure that if a font is not available on that machine then the next one will be loaded.

This article by David Rodriguez better explains in detail the situation about web-safe fonts and its practice. If you want to improve your font stacks and try new solutions still inside the boundries of web-safe fonts I suggest you download the pdf over at Unit Interactive, it has become my reference since I read it.

Of course you may argue that you have seen on many websites different fonts then the usual verdana or georgia (just to cite a couple). That’s because there are some existing techniques like sIFR3, cufòn and image replacement to use not common fonts, but they all imply the use of flash or javascript or images with many disadvantages and they are therefore used only for headings generally.
Craig_Ward_badtypographyiseverywhere.jpg

i. alternatives

Today something is apparently changing things and all typophiles around the globe are shacking for the excitement (too much?).
I’m talking about @font-face, the new CSS rule that allows to embed fonts on your site.
I’ll give you a tutorial about how to use it effectively in a while, but first let’s see what is the situation at the moment in regard to the availability of fonts.

ii. webfonts proposals

ILoveTypography has a nice complete article about the subject which I’ll summarize here.
Microsoft in 1997 devoleped its proprietary Embeddable Open Type (.eot) format which was then supported from IE 4. They submitted the proposal at the W3C but was rejected mainly for security reasons.

Now Tal Leming and Erik Van Blokland proposes a new format, .webfont, which would consist of two files: a raw file of the font (i.e. ttf or otf) and a info.xml file wich contains the permissions about that site using that font. The browser read it and decides if it’s ok to load it or not.
You can read at ChezPorchez more in detail about how that works.

David Berlow of Font Bureau proposes instead permission tables for Opentype inserting permission infos inside the font file (so you get only one file) already embeddable by @font-face because it’s still a .otf.
One critic about these solutions is that we could edit the xml file to add permissions without owning a license.
Meanwhile Ascender has been working to evolve the EOT format of microsoft in a more friendly to use EOT Lite.

In latest news, the efforts of Leming & Blokland have joined those of Jonathan Kew (Mozilla Corporation) to give birth to the WOFF format, a unique compressed font file which contains meta-datas and private-use data. Here’s a quotation from the official document

The WOFF format is directly based on the table-based sfnt structure used in TrueType[1], OpenType[2] and Open Font Format[3] fonts, which are collectively referred to as sfnt-based fonts. A WOFF font file is simply a repackaged version of a sfnt-based font in compressed form. The format also allows font metadata and private-use data to be included separately from the font data. WOFF encoding tools convert an existing sfnt-based font into a WOFF formatted file, and user agents restore the original sfnt-based font data for use with a webpage.

Apparentely tools for the conversions of files are yet to be created, but that’s a step further towards a solution. The official document is here.

However the problem is that all of these solution must be accepted by W3C to be adopted in the future, but W3C will start working only on a proposal that is supported by the majority ot typefoundries and there’s not an actual type industry — commonly represented at least — so the decisions are always pretty indivualistic and this slow things down. Then of course we should wait that browsers support it.

iii. distributors solutions

Someone is already supporting @font-face rule by selling licensed fonts enabled to be embedded.
One is Typekit, which rents the font instead of selling completly the license.
You chose on which domain you’ll use it and then you’ll pay per domain monthly. In exchange you get a javascript code which embeds the font hosted on a third party server.
Typoteque is doing something very similar, selling licenses (not monthly but per domain as it seems) and hosting on a cloud the font. You’ll get instead of javascript a css code to add on your site. They also explain that when you pick the font you also need to select the language. This helps them eliminate the characters you won’t need and serving you a much shrinked file for fast loads.

Andy Clark over at For a Beautiful Web complains that typekit is a nice solution bu it lefts a problem for us designers: if we have a license that allow us to only embed a file on a site and we don’t own the font, how can we use it offline to show projects to our clients?
Actually he doesn’t care too much because he is also pushing his collegues to start working within the browsers which would also solve this problem.

chunk-11.jpg

Then of course there are some openfonts to use, free typefaces in some cases created as opensource projects or simply offered with free embeddable licenses.
On Webfont.info and Font Squirrel you can find some great list of available fonts for embedding. In particular on this site I use a couple of fonts hosted by The League Of Moveable Type and Cape Arcona, you can see which in my about page.
Jos Buivenga also offers a nice selection of fonts.

Can I use every font I want? No, you are obviously limited by End User Licensing Agreement (EULA) therefore choose carefully which fonts you use.
For instance you can’t upload online a font among those that came with your OS because they are generally licensed strictly for a use within desktop applications. By uploading them you would violate the license and also expose that font to be downloaded by anyone as it’s on a web server. Always choose fonts you know that are specifically licensed for embedding.
Always read carefully the EULA of the font you bought or found online, because even when you pay you’re not really owning the font but only a license to use it. On Font Feed they explain very well how to read an EULA with the exemple of the new version used at Fontfont.
If you find a font which is free and you are not sure about you can write a comment in your stylesheet near the @font-face rule asking for permission, as it is suggested on Hack.Mozilla.

@FONT-FACE: HOW TO USE IT

If you read the first part of the article you could think that everything is still very messy and we won’t use this method any time soon yet.
No, infact everything is ready and you can finally enjoy the new @font-face rule to style your body copy.
There are some limitations about the availability of fonts, but we already have a vast variety at our disposal, and many last generation browsers support it (Opera 10, firefox 3.5, IE since 4, webkit-based/safari 3.1.) You can find a detailed list at webfont.info

So, here it is how @font-face works: it’s a rule for your stylesheet that allows you to link to a font (a .ttf .otf .eot file) the same way you now link to codes and images. Your font file is hosted on a web server and @font-face load it from there to render your html text where you specify it.

/* Graublau Sans Web (www.fonts.info) */
 
@font-face {
  font-family: Graublau Sans Web;
  src: url(GraublauWeb.otf) format("opentype");
}
 
body {
  font-family: Graublau Sans Web, Lucida Grande, sans-serif; 
}

It has 3 declarations:
font-family: which is the referral to later use in your font stacks. It’s arbitrial, you can freely choose how to name it as long as you use the same name in the font-family property for the styled elements.
src: this is where you insert the path to the font hosted on your web server.
if you think the font could be already installed on visitors machine you can then use local(fontname) and maybe list some alternatives as well as the path to an hosted file.
format: let’s you specify which kind of file you are using (.ttf or .otf).
font-style: the standard value is normal but you can use this to chose between italics and bold. Actually if the font support it you can specify up to 9 weights.

If you need to know the exact name of the file to write a perfect path on Mac OSX and Linux you can simply click “font info” among the file’s options, on Windows instead you’ll need the font proprietary extention. However generally the name of the font is given by the family and the style (i.e. “helvetiva bold”).

To recap: Look a this exemple from HackMozilla

@font-face {
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"), 
       local("HelveticaNeue-Bold"), 
       url(MgOpenModernaBold.ttf);
  font-weight: bold;
}
 
body { font-family: MyHelvetica, sans-serif; }

You see that each @font-face rule has the 3 declarations. With font-family they assign a name to the font, with src they grant more then one place to find that font locally on the visitor machine or on the webserver, with format they specify that is a TrueType file or an OpenType.
Then they style the element “body” normally with the property font-family and they put in the font stack also the name we chose before, so the browser will recognize it and refer to what’s in the @font-face rule to load it.

evolve8_i-typography

ii. helping IE

IE, as usual, has its own rules. This time we have to admit they came first with their proprietary format Embeddable Open Type (.eot) and they support @font-face since IE4. Unfortunately that situation didn’t evolved much since then and they are the only to use that (.eot). Plus, IE doesn’t recognize the descriptor “format” and will ignore any @font-face rule containing that hint.

This means that to ensure crossbrowser compatibility you’ll have always to add a @font-face rule specifically for IE on top of the others, linking to a eot file and avoiding the format descriptor.

/* Font definition for Internet Explorer */
/*         (*must* be first)             */

@font-face {
  font-family: chunkie;
  src: url(type/Chunk/CHUNKFI0.eot) /* can't use format() */;
}

And where do you think you’ll find the eot files? nowhere, smile! you need to convert your ttf files with the Microsoft WEFT tool (I’ll explain you how shortly). This tool is only available on Windows, but here you can find the GPL opensource equivalent for other OS.
However this two tools help you convert only .ttf files in .eot, but what about Opentype .otf? you’ll need to follow the instruction of J.Malcolm in this comment.

As I mentioned a few lines above, let’s see how to use WEFT to convert .ttf files into .eot
Jon Tangerine explains here his way, probably the best.

iii. Optimizing for IE

Allright, you would have all the element to use @font-face successfully, but you would still need to use 2 selectors to support IE and this is not that beautiful. Moreover, even if you’re not so concerned by your code’s beauty, you may be about your performances.
Andrea Giammarchi early this week noticed that when IE read your @font-face selectors tries to load also the .ttf files simply getting a 404. You won’t notice this unless you check your server log but it’s still useless work for the server. Paul Irish comes on his white horse to save us with a simple solution: in one selector you can list first the src to the eot file for IE and then a local src which makes IE ignore the subsequent src to a ttf file for any other browser. simple, slick, beautiful. You can read about the whole testing process on Scott Kimler’s blog.
Here instead an exemple of the working code taken from Giammarchi’s page:

@font-face {
    // define the font name to use later as font-family
    font-family: "uni05_53";
    // define the font for IE which totally ignores local() directive
    src: url(../font/uni05/uni05_53.eot);
    // use local to let IE jump this line and
    // redefine the src for this font in order to let
    // other clever browser download *only* this font rather than 2
    src: local("uni05_53"), url(../font/uni05/uni05_53.ttf) format("truetype");
}

Conclusions:

That’s it, we have seen what was the situation of typography in web design until yesterday, what are the proposals for tomorrow and how to use @font-face today.
You have all the tools you need and even if it looks tricky reading such a long article I can assure you that it’s very simple.
So it’s time for you to contribute to a better Web with beautiful typefaces!

If something is not clear feel free to ask me anything in the comments or have a look at the resources I listed below under “Get to know more”.

You can leave a response, or trackback from your own site.


Tags & Category



Related articles


Share

  • digg
  • SFacebook
  • Twitter
  • technocrati
  • stumble
  • delicious

Comments   13rss

    1. Comment by stk

      September 14, 2009 @ 12:44 am


      Very nice, but it’s "Kimler", not "kilmer" :-p

      (Don’t worry, the guys at the fire-hall can’t get it right either!)

    2. Comment by Michel (admin)

      September 14, 2009 @ 6:20 am


      Ops, I’m truly sorry, now I fixed it! Thank you for your great post about the code, really helped me out :)

    3. Comment by Ashley Adams : Postcard Printing

      September 23, 2009 @ 2:41 am


      Nice post…….it will be of great help for people like me who are not that comfortable with IE. Keep posting

    4. Comment by Lewis Litanzios

      October 24, 2009 @ 10:45 pm


      Thanks mate!

    5. Comment by vinzzz

      December 10, 2009 @ 12:08 pm


      hi there,

      could you explain why not every font works? sometimes i choose a font, convert it for IE but it wont show. If i use another font in the same code, it words…

      Could you please email me?
      Thx in advance

    6. Comment by anup pan

      May 20, 2010 @ 6:07 am


      can i have an html file & a css file to see how @font-face works.

    7. Comment by Jet Black

      August 12, 2010 @ 5:52 pm


      I would just head over to: http://www.kirsle.net/wizards/ttf2eot.cgi

      Here you can convert you .ttf file into an .eot file. Easy.

    8. Comment by Adam

      August 24, 2010 @ 7:35 am


      Wicked! We are just starting to get into this @font stuuf now (lagging behind a bit I know). Thanks for the cool info. I was really glad to see the bit on IE as it is always hard for a mac designer to resolve issues for XP on PC without technical help. Very well done.

      This deserves a story on my blog pointing users here to read all this. I am sure they will find it as useful as I did.

      Thanks, Adam.

    9. Comment by Adam

      August 24, 2010 @ 7:42 am


      Oh excellent mate, I just saw Jet Blacks link to the converter. Awesomely handy. You guys have probably seen this but there is a converter here: http://typeface.neocracy.org/fonts.html

      It does TrueType / OpenType Fonts to a javascript format to use with their font js I think. May be handy to someone.

    10. Comment by theBelt

      April 16, 2011 @ 6:00 pm


      Fantastic article, the most understandable and practicle article on this subject I have encountered so far. Great stuff. Now let’s hope I can still be using it for a while considering all the developments going on. Can this practice be sustained when HTML5 shows its ugly head?

    11. Comment by Michel (admin)

      April 17, 2011 @ 9:05 pm


      Thanks mate, I’m glad it helps.
      about your question, I don’t think html5 can cause any problem. as a matter of fact html5 it’s a new standard for what concerns the structure of the page while @font-face is part of CSS3 new styling rules which concerncs styling.
      css3+html5 sounds like the future of front-end development. they go well together :)

    12. Comment by Damo

      December 26, 2011 @ 9:07 am


      Sweet! and so many useful links – nice job buddy!

    13. Comment by Misterwayward

      February 2, 2012 @ 8:23 pm


      The following sentence in this article contains a typo:
      If you find a font which is free and you are not sure about you can write a comment in your stylesheet…

      Should read
      … and you are not sure about it, you can write…

      Regards.


top