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.

common mistake

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.

websafe fallback fonts

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.

wire one + arial

This might causes layout issues as shown in the image below where the fallback font extends off the boundary.

layout issues

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.

modernizr

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.

no-fontface style

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;
}

100 Comments

1 3 4 5
  1. sarwa
    Feb 12, 2012 @ 10:46 am

    Great post. Thanks for sharing it.

    Reply

    • Harshal
      Jun 1, 2012 @ 6:42 am

      yes … Great post. Thanks a lot

      Reply

  2. evolution
    Mar 3, 2012 @ 7:33 am

    Nice tutorial!

    Reply

  3. design
    Mar 30, 2012 @ 5:57 pm

    great examples i would not of thought of testing a fallback font to make sure it stays within boundaries etc. good suggestion and post.

    Reply

    • kumaresh
      May 11, 2012 @ 6:17 am

      same here…not taken care about fallback, text size etc., thanks for this great tip.

      Reply

  4. mike brick
    May 31, 2012 @ 10:50 am

    What is point of having a fallback font for your fontface style if it’s going to just fall back to your non-fontface solution?

    Reply

  5. Dale
    Jun 5, 2012 @ 4:29 am

    Such a great tutorial!
    Is there a website or a way that we can test to see if the script works?
    If I remove the custom font from my remote server whilst using the modernizr fallback as explained above, it doesn’t seem to pick up the modernizr fallback font. Am I testing it the wrong way?

    Reply

    • Karl Kelman
      Jun 19, 2012 @ 3:26 pm

      Dale,

      If I understand how Modernizr works correctly, it’s testing your browser to see if the browser supports @font-face. Whether or not your page actually uses @font-face isn’t tested. The fallback class is only activated if you are viewing the page with a browser that doesn’t support @font-face.

      Reply

  6. Craig Smith
    Jul 12, 2012 @ 7:34 pm

    I think Google Fonts you shouldn’t have any problems with fonts not rendering, and you don’t have to worry about backup fonts. Since fonts load via Google. I never had a problem with it.

    Reply

  7. Ibiza yates
    Jul 29, 2012 @ 3:11 pm

    If I remove the custom font from my remote server whilst using the modernizr fallback as explained above, it doesn’t seem to pick up the modernizr fallback font. Am I testing it the wrong way?

    Reply

  8. Oliver
    Aug 5, 2012 @ 2:13 pm

    It does not work with Firefox when web fonts are disabled (about:config > gfx.downloadable_fonts.enabled > false) and all the content is displayed with fallback fonts (e.g. Arial). So how can I test it?

    Reply

  9. Purple Lime Design
    Sep 11, 2012 @ 1:38 pm

    I was thinking of finally going wild on my site redesign and finally breaking away from websafe fonts but wasn’t sure if it was a good idea – think i’ll give it a try with this fallback! Thanks!

    Reply

1 3 4 5

Leave a Reply