The FontFace jQuery Plugin

From the safety of the trenches the browser wars are still being fought. One of the war’s toughest battlefronts is @font-face.

You’re used to needing proprietary extensions to use new CSS3 properties—we can deal with that. Even hardened veterans, though, can find themselves unprepared for just how much browser-specific code is required to implement @font-face successfully. Time to prepare yourself!

Ready?

@font-face {
  font-family: "BestFontEver";
  src: url('file/path/filename.eot');
  src: local('☺'), url('file/path/filename.woff') format('woff'), url('file/path/filename.ttf') format('truetype'), url('file/path/filename.svg#BestFontEver') format('svg');
}

And even that doesn’t set any elements to use your new BestFontEver font; it simply registers that you want to use it, and requests the browser source that new font.

The good news is that once registered, the font can be used the way we’ve always used font-family. Let’s say we have a sans-serif font:

#element, .elements {
  font-family: "BestFontEver", Helvetica, Arial, sans-serif;
}

So, why so many options when registering?

Taking Stock of the Combatants

  • .eot (or Embedded OpenType) font files are Microsoft’s troops, so if you want BestFontEver to appear in Internet Explorer, you’ll need an .eot version.
  • Web Open Font Format, or .woff, is the newest soldier in the conflict. It was developed by Mozilla and is supported by Firefox, Chrome, Opera, and IE9.
  • Next come TrueType Fonts with the .ttf extension, which Apple developed in the late 1980s. These fonts are supported by Safari, Opera, Firefox, and Chrome
  • The SVG format? That’s there for platforms that embrace SVG like your iOS devices: iPhones, iPads, and anything else that runs Mobile Safari.
  • And that last src entry? local('☺')? It’s there in case a user that’s viewing your page already has an installed font named BestFontEver. It protects your BestFontEver font by not loading their local font. This technique was developed by Paul Irish, so you can check out his explanation of why it’s a good idea.

Your Super Soldier

So where does that leave you? The battle lines are drawn, but the fog of war won’t be lifting any time soon. What you want is a way to get @font-face-sourced fonts to your pages quickly and easily.

That’s where jQuery comes in! We can use a plugin to be our foot soldier while we sit back in HQ and wait for the browsers to fight it out. Then all we’ll need to do is provide a jQuery.css()-style object. The FontFace jQuery plugin is a great way to apply fonts to sites you don’t control, to quickly prototype how fonts will look during design, to give less experienced developers greater control, or even—if you choose—for your production-ready pages:

$("#element, .elements").fontface({
  fontName : "BestFontEver",
  fontFamily : ["Best Font Ever", "BestFontEver", "Helvetica, Arial, sans-serif"],
  filePath : "/_fonts/",
  fileName : "bestfontever-regular-webfont"
});

That’s it, and that’s the long version! After tweaking the plugin a little, we can reduce the requirements to just this:

$("#element, .elements").fontface({
  fontName : "BestFontEver",
  fileName : "bestfontever-regular-webfont"
});

You can remove fontFamily details fairly safely, and still dictate the stack like so:

$("#element, .elements").fontface({
  fontName : "BestFontEver",
  fontStack : "Helvetica, Verdana, Arial, sans-serif",
  fileName : "bestfontever-regular-webfont"
});

To remove the need to supply filePath details, we’ve just set a default in the plugin. Look for the defaults object in the plugin code:

defaults = {
  filePath: "/_fonts/",//change this to your font directory location

You can still supply any one-off filePaths you need, but setting it in the plugin makes it fire-and-forget.

Even better, though, if you have a font that has different weights or styles, you can use these:

$("#element, .elements").fontface({
  fontName : "BestFontEver",
  fontWeight : "bold",
  fileName : "bestfontever-bold-webfont"
});

$("#element em").fontface({
  fontName : "BestFontEver",
  fontStyle : "italic",
  fileName : "bestfontever-italic-webfont"
});
	

Grab the plugin and try it for yourself!

You can find great, free @font-face-ready typefaces at sites like http://code.google.com/webfonts/ (for TrueType Fonts), http://webfonts.info, http://www.fontsquirrel.com/, and http://www.fontspring.com/.

And one last tip? If you’re fairly sure that a big chunk of your audience will have your font installed, you can use its usual name in your font stack to load their local version. It’s actually what we did in our first example. Using the accepted name—Best Font Ever—in your font stack before the name you associate with the @font-face loaded version—BestFontEver—means we default to using a local version if it’s available. If it’s not installed, we’ll progress down our stack till something sticks and that’ll hopefully be our @font-face.

We’re On Your Side

War is heck, but with allies like jQuery’s @font-face plugin, you’ll be winning the war before you know it!

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.deathshadow.com deathshadow60

    CHRISTMAS ON A CRACKER, are you **** joking?

    Yeah, let’s throw a fat bloated 90k javascript library with extra code on top of it to do what you can already do in CSS thus:

    @font-face {
    font-family: ‘BestFontEver’;
    src: url(‘BestFontEver-webfont.eot’);
    src: local(‘?’), url(‘BestFontEver-webfont.woff’) format(‘woff’), url(‘BestFontEver-webfont.ttf’) format(‘truetype’), url(‘BestFontEver-webfont.svg#webfontrwSM9VT7′) format(‘svg’);
    font-weight: normal;
    font-style: normal;
    }

    works IE 5, 6, 7, 8 & 9, FF2+, Opera 10+ and the latest flavors of saffy and chrome.

    Oh yeah, all that javascript is SO much better. PERFECT example of the “throw jquery at it” mentality that is flushing websites right down the crapper. Let’s use a 90k bloated library and 320 bytes of javascript to do what 320 bytes of CSS can do all on it’s own without the scripted bull…

    What’s next, an article on how to make links red when you hover them using jquery?

    • http://www.deathshadow.com deathshadow60

      My bad, forgot to mention the 3.7k of script used by the plugin itself — and we wonder why people are vomiting up pages with hundreds of k of javascript for nothing.

      JS for nothing and your scripts for free… That ain’t working, and that’s NOT how you do it.

      • http://www.yacare.fr McBenny

        You’re right but maybe sometimes it can be useful : if you already embed the library for other stuff (that can’t be held by CSS of course), you don’t count the 90k.
        There is still 320o.
        Well, if you embed a lot of rare fonts, you may find it fast and simplier to use the plug-in.

      • http://www.deathshadow.com deathshadow60

        @McBenny (I hate how this won’t nest replies more than two deep)

        >> if you already embed the library for other stuff

        Which I still find it hard to believe anyone is dumb enough to do since uncompressed by itself jquery is larger than I usually target for an entire page template (no content) of HTML+CSS+JS+IMAGES, and two-thirds my upper limit. Even served compressed it’s a third my usual total target before you even write scripting to use it.

        It’s sheer idiocy for ‘gee ain’t it neat’ bull — I can’t believe ANYONE believes it makes ANYTHING easier or better or is DUMB ENOUGH to use it in the first place.

    • re5et

      plus, it won’t work for users without javascript

    • Jenn

      I agree. Should be doe properly with a call. If your too lazy to type yourself, then use this generator (as long as you have rights to font): http://www.fontsquirrel.com/fontface/generator. Just need to upload one file then copy and paste the html.

      Javascript is being WAY to overused these days.

      • craiger522

        Thank you for this!

    • Josh

      Lmao, well said. I had just archived the SitePoint email after glancing over this article when I suddenly said: “Wait, WTF?”. Had to check out the comments to make sure that someone set the author straight.

    • bluesix

      Damn right! This is the most RIDICULOUS use of JS I’ve ever seen. Can’t believe you guys published this. Just write the FOUR lines of CSS for christ’s sake.

    • sfrost2004

      Not sure where you got the 90KB figure from…

      The production version is 26KB (minified and gzipped).

      The development version is 179KB.

      If you’re so worried about file sizes, I’m assuming you *are* using the production version and that you *already* have gzip enabled on Apache (or equivalent on whatever server you use) and that you are already minifying your CSS as well as your JS.

      For all the functionality that jQuery provides and with the fact that most websites will already be using it for other parts of their site *and* also the fact that the library will already be in most peoples’ caches, I don’t think that 26KB is too much to ask.

    • Anonymous

      Couldn’t agree more.

  • http://www.patricksamphire.com/ PatrickSamphire

    I always thought that the main advantage of font-face over many other solutions was that it didn’t require javascript and worked on almost all browsers. *If* you’re already using jQuery *and* you know you’ve got a lot of users who can’t access font-face for whatever reason, *and* you don’t want to use any of the other javascript solutions, this might make sense. Otherwise, I can’t see the use for it, I admit.

    • http://www.deathshadow.com deathshadow60

      Thing is, it uses @font-face to work in the first place! As such it’s no better than just using the CSS which is what’s leaving most of use scratching our heads as to “Good lord, WHY?!?”

      Literally, what does this accomplish besides bloat?

      • http://www.patricksamphire.com/ PatrickSamphire

        Good point. Very strange altogether.

  • http://www.tyssendesign.com.au Tyssen

    I’m afraid I don’t really see the advantage of using this plugin either.

  • fn64

    the whole point of @font-face is that it saves us form bloating our pages with ugly crap like cufon or sifr and also it works cross-browser and pretty stable because it is CSS, man.
    now you suggestin’ us to go back to ugly javascript workarounds? what’s your point?

  • http://www.lunadesign.org awasson

    LOL… What a load of nonsense these comments lambasting the author are!

    First off, if you don’t like the article or the concept then don’t use it. Get off your high horse with the “I’ll straighten the author out” attitude and move on!

    Secondly quit spreading nonsense about how big jQuery is. It’s already been established that jQuery is about 26k when it’s appropriately gzipped on the server and it gets cached anyway so it will likely only be downloaded once a session. Shall we remove all imagery above 30k as well? That would make for an interesting website.

    I too appreciate the minimal and efficiency in code but this is the end of 2010 and we are supposed to be on the cutting edge of the user experience. Website visitors today want to interact with websites be it through jQuery, Flash, or hand rolled JavaScript/XMLHttpRequest, etc… If you don’t want to provide that sort of development that’s fine but there are a great deal of us who’s jobs depend on providing just that. If jQuery provides the best bang for the buck then jQuery it is. If not, I’ll roll my own solution but at least I’ll consider it and with jQuery loaded I have the hooks in place to do a lot more with very little additional code.

    This author has written an article that illustrates an approach to dealing with font embedding. You don’t have to use it but if I were to load up jQuery which I often do these days then I would definitely give this approach some serious consideration.

    • http://www.patricksamphire.com/ PatrickSamphire

      I have no problem with jQuery at all. I think it’s an excellent library with many uses. But the problem with this plugin is that appears to offer *no* advantage over simply using a few lines of CSS, and plenty of disadvantages. It’s about using the right tools for the right job. This is the wrong tool.

  • http://brianswebdesign.com skunkbad

    I’ve never seen one of the web fonts that actually looked good. They seem to render very poorly.

  • Tim

    Completely disgarding if it’s a good idea or not to use javascript to accomplish this, why are people so concerned about the size of a jquery download when you’re downloading a font that is far weightier? If you’re going to complain about jquery, even with there being a fairly good chance you already have it cached on your machine, then you should also be complaining about having to download large font files just to see the page as intended.

    • http://www.deathshadow.com deathshadow60

      That too.

      But with people vomiting up megabyte plus monstrosities built from hundreds of files and calling them websites, the artsy fartsy types are coming out of the woodwork in droves — including the typography and ‘style’ zealots who don’t know enough about the Internet to be opening their mouths on the subject.

  • StyleZealot

    Author clearly states “or even—if you choose—for your production-ready pages” — what are you all whining about? I like how jquery became evil all of a sudden…baffling. Like their 1ghz iphones or their 6yo 2.8ghz laptops can’t tackle rendering some tiny js library. The whole point of this plugin is to switch in @ffs dynamically without reloading the page “to quickly prototype how fonts will look during design.” Probably useful for firefox fout issue as well (signed, Firefox…29.92%).

    Go back to your “functions are an irresponsible use of system resources” thesis, oldies…

    Style zealot