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!

Frequently Asked Questions about the FontFace jQuery Plugin