Although CSS3 @font-face is supported by most major browsers (IE, Firefox, Chrome, and Safari), but not all. When it doesn't, your custom fonts might break the layout or come out with undesired results. In this article, I will explain the common issues with using custom fonts, picking the matching fallback web safe fonts, and how to create a perfect fallback font style with Modernizr.
Common Mistake
One common mistake that most people make when implementing custom fonts is not specifying the fallback fonts or picking the wrong fallback fonts.
Web Safe Fallback Fonts
When using custom fonts, it is important to include the web safe fonts as fallback. The fallback font helps to keep your design looking consistent when @font-face is not supported or available. The key point for selecting fallback fonts is to pick the web safe fonts that best match the custom font. For example, if the custom font is Clarendon, then the best web safe fallback font is Georgia because they both are in serif classification and they have similar font width.
Layout Issues
Because every font face has its own width, height, weight, kerning (letter-spacing), etc., some fonts are not substitutable with the web safe fonts. Take a look at the example below. It is a comparison between Wire One (custom font) and Arial (web safe font) at 36pt uppercase. As you can see, the Arial text takes more than double the space compare to Wire One text because Arial has a wider width and kerning.
This might causes layout issues as shown in the image below where the fallback font extends off the boundary.
Modernizr
Fortunately, there is a Javascript called Modernizr that can help to fix the issue as mentioned above. Modernizr is a Javascript that detects what CSS3 features are supported by the browser. It will then add a CSS class in the <html> element to indicate whether the features are supported. For example, if @font-face is not supported, it will add no-fontface class in the <html> element (eg. <html class="no-fontface">). These CSS classes are added with Javascript and they are not visible in the source code. In order to see them, you need to inspect the page element or view the generated source.
Fallback Font Styles With Modernizr (demo)
So we can use Modernizr to detect if @font-face is supported and then provide matching fallback font styles. For instance, you can adjust the styles for the fallback font (size, letter-space, weight, text-transform, etc.) to best match the custom font.
Including Modernizr
To implement Modernizr, you need to download a copy of Modernizr and include it in the html document.
<script src="js/modernizr.js"></script>
.no-fontface CSS
Then you will need an additional rule for specifying the .no-fontface. Check out this demo to see the final result.
/* wire one font */
h1 {
font-family: 'Wire One', arial, serif;
font-weight: bold;
font-size: 48px;
letter-spacing: 1px;
text-transform: uppercase;
}
/* no-faceface fallback */
.no-fontface h1 {
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 30px;
letter-spacing: 0;
text-transform: none;
}
this article is very timely for me, just implementing @font-face on a project now ;)
Nice Guide, but the demo’s are not working getting a 404 keep up the good work
The demo url is fixed now.
Handy for me! I was actually searching for some information on webfonts and @font-face & this guide just perfect for it :) TY
Nicely put article, and it will help me. I did not know about Modernizer up until now.
Thanks
Yeah, a very helpful text, thanks! I’ve been thinking about using @font-face and this article gave me clues (and solutions) about possible problems.
This post explains very nicely about custom fonts, picking the matching fallback web safe fonts, and how to create a perfect fallback font style with Modernizer….REALLY A GOOD WORK!keep it up! and keep updating us!
Nice job. Very well put together article and full of useful info.
It’s starting to get crazy with all of the scripts we need to include these days. jQuery, Modernizr, etc. I can’t wait until we can get some more uniform browser support. But, it seems like this type of request hasn’t really changed since the dawn of the browser wars. [sigh]
I must say, thank you for the article, I’m a big fan of @font-face and this is a big help for me, for my future projects :D thanks
What’s the benefit to using Modernizr for matching font styles rather than just adding them in the CSS for the class you are targeting? In your example:
h1 {
font-family: “Times New Roman”, Palatino, Georgia, serif;
}
I am not really getting why Modernizr does this better, especially when it’s adding more load time to your page and does (as far as I can tell from this tutorial) exactly the same thing as backup fonts in CSS.
Can anyone clarify if I’m missing something?
If you observe the examples, using the no-fontface class, you are not only changing the font, but also changing other characteristics such as size, weight, etc. Example shows Wire One 48pt upper case, with a no-fontface fallback of Arial 26 normal. Simply adding Arial to the font stack would result in Arial 48 upper case. So, basically, you can style your no-fontface font to fit the space provided in your layout. It’s a complete alternate style fallback that results in a similar-enough experience for all users.
I see now. Sorry I’m a bit new to advanced CSS/etc and didn’t pick up on that. Thanks for the clarification!
Great article. I’m planning on using modernizr on my next project!
Thanks for pointing out the importance of fallback fonts, Nick. I’m with ya!
In addition to @font-face, this idea can also be applied to various font-embedding services. In my experience with Typekit, the default font stack I copy from the kit looks something like this:
font: 'tk-sans-1', 'tk-sans-2', serifObviously not ready for production. Typekit also provides some control that looks like it does some of what Modernizr is doing above.
Nice article.
But what happens if the browser supports @font-face but the font is not found (‘Wire One’ in your example)? Will we still see the fallback font out of boundary?
Back to the example, if the browser supports @font-face but the font ‘Wire One’ is not found we will see Arial 48px instead of Arial 30px, correct?
The browser downloads the font from the server and loads it. If the font not found on the server due to error, or the browser can’t load the font then you are right, the original 48px arial will be displayed.
There is another css3 property – I hope will be implemented in browsers – is the font-size-adjust, which basicly sets the font size by the x-height, not the capital letter height. This is also useful for font fallbacks. Unfortunately it is only implemented by Mozilla right now (who proposed the property and in Firefox since 1.0).
Thanks for the article and info on Modernizr. I’ll be giving it a shot :D
Nick,
Thanks much for clarifying some things. I have been “playing” around with @font face a bit and have run into snags.
Always a pleasure reading your posts.
Dale
Very nice of course, but I would suggest a slight tweak that would handle rare, edge cases: what if JavaScript isn’t enabled on the browser AND the browser is not compatible with @font-face? Solution is quite simple: instead of using the no-fontface class generated by Modernizr, it would be best to first write the fallback CSS rule for fonts, that will be processed by every browser, no matter if there are JavaScript or not, and then write a CSS rule applying only to the “fontface” class generated by Modernizr. Since Modernizr generates both possibilities (“with or without the feature”), that allows the feature to degrade even more gracefully for non-Javascript enabled browsers. Only downside: if a browser has JavaScript disabled BUT @font-face… it will only display the fallback layout. Then we have to decide what is worst: for someone that has @font-face enabled but no JavaScript to see a perfectly suitable, though not-as-cool-as-it-could-be fallback layout, or for users without JavaScript AND without @font-face to see a bizarre layout, due to the rules based on a no-fontface class that won’t apply because there is no JavaScript… Hard choice, all depends on the targeted users, but that “inverse” option is pretty neat too, I think!
I had the same remark…
I guess it’s ok to give people who turned JavaScript off a less visual experience ans just use a web safe font for them.
Hello, WebdesignerWall
May you cover a tutorial on modernizer and how to use this library effectively?
thank you!
Nice resource I have many website that could use this fallback thanks!
Nice article on web fonts!
There’s one thing I miss. In my opinion the biggest problem with web fonts are not the browsers that don’t support @font-face, but those that do support it but don’t render most of web fonts correctly. I’m looking at IE on Windows XP. Even with clear type activated, the masses of web fonts look bad. I don’t see any other solution than UA sniffing here, but maybe there’s something else?
Yes, I missed that too in the article, the problem is with the lack of proper font smoothing in Windows XP, I found a script that can solve that issue detecting if the OS is having some kind of font-smoothing via the canvas element, check it out:
http://www.useragentman.com/blog/2009/11/29/how-to-detect-font-smoothing-using-javascript/
The script adds a conditional statement that you can use to add a custom class and switch between different fonts. In my testing I’ve discovered that some fonts do look OK in XP.
Great post. I’ve heard of modernizer but never really looked into it. In my mind it was the same as PIE for ie CSS3 support. Thanks for the clarification and clear presentation of graceful degradation.
I learn a new thing, it save my time to edit those styling text. Previously I am so painful to create such text in images format. The best is, you covered web safe fonts part for unsupported web browser.