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