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.
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.
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.
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.
To implement Modernizr, you need to download a copy of Modernizr and include it in the html document.
Then you will need an additional rule for specifying the .no-fontface. Check out this demo to see the final result.