Combining Cufón and @font-face
Everyone wants @font-face to work everywhere, but as it stands, it only works in Safari and the upcoming versions of Firefox and Opera. In this article I’ll show you how to use Cufón only if we can’t load the font through other, faster methods.
If you’re not familiar with Cufón, check out my previous article: Cufon vs. Typeface.js, which one is better? or this article: Exploring Cufón, a sIFR alternative for font embedding by Cameron Moll.
Not just @font-face…
Now, @font-face isn’t the only way to display custom fonts. What if the visitor already has the font installed? It’ll display automatically then, again leaving us with no reason to use load Cufón. These are the three options you have when you want to display custom fonts, in order of speed:
- The font is already installed on the users computer
- The font get’s downloaded and displayed with the use of @font-face
- The font gets replaced by Cufón
I will not go into @font-face in this post, for more on web fonts, read these articles: CSS at ten and @font-face in IE: making web fonts work (Which not only explains how to use @font-face in browsers that support it, but also in IE using their proprietary DRM-ed .eot ‘standard’.)
The effect of an installed font and using @font-face are the same: The font is rendered and displayed natively by the browser. This means that you only have to check if the font is available, and can forgo checking if @font-face is at all an option. A very smart solution to do this is the jQuery fontAvailable plugin. The implementation looks like this:
// code here
The plugin works in a most ingenious way: On document load, it created an element with the alphabet in it, and sets the font-family to a non-existent font to apply the default font. It then replaces the font-family with the font you've specified, and checks if the width has changed. If the width has changed, that means the font was applied and is available.
Update: Eneko Alonso ported the plugin to mootools: moo-fontavailable. Cool no?
So, all you have to do to make this work, is make sure that the font-name you define in your @font-face declaration is the same as the real font name, and it will automatically work for both already installed fonts, and fonts loaded in with @font-face!
And then Cufón
$.fontAvailable returns false! (Note the added ! in the example code, so Cufón gets executed if the font is not available)
Unfortunately it's not quite that easy. Because IE can show a FOUC with Cufón, you have to add
Cufon.now(); at the end of the page. If we use Cufón from within
$(document).ready();, that would make
Cufon.now(); ineffective because it would actually be parsed before the document is ready, and thus before the initial
It will still work, but IE users might see the font getting changed while the page is loaded. Over at the Google group, they are already working on a solution to this, so it shouldn't be long before you won't need
Cufon.now(); at all anymore.
That's all there is to it
All in all, it's quite simple. Check if the font is available, either through already being installed or through @font-face, and if it isn't, we'll let Cufón display it. This offers you the best of both worlds, because browsers that support @font-face will have their native text, and browsers without @font-face support will still get custom fonts.
Cufón and Typeface.js are both methods to show text in custom fonts (like sIFR), are both only a couple of months old and both use canvas or VML. So what’s the difference? And which one is better?
How does it work?
Cufón and Typeface.js both work by…
In “Cufón vs. Typeface.js, which one is better?“, I declared that the first one to support selectable text wins. We’re a couple of months further now and both Typeselect and Typeface.js 0.13 appeared, adding support for selectable text. What is the state of selectable text-replacement?
I don’t have a topic to write about extensively for this week. However, I do have some cool links and small bits (of wisdom?) that I’d like to share with you.
How vain, to start with something of my own! Anyway, I released version…