html

What are CSS Font Fallbacks

CSS provides two types of font families i.e. generic font family and individual fonts. The generic families have similar-looking font families such as serif (Times New Roman, Georgia, and Garamond), Monospace (Courier New, Lucida Console, Monaco), etc. while the individual font specifies only one particular font family such as Arial, Calibri, etc.

The generic font families provide a fallback mechanism that allows us to specify a list of look-alike fonts so that if the first font is not available on any platform then the browser can pick the second font, and so on.

This article presents a detailed understanding of the following terminologies related to font fallbacks:

  • What are font fallbacks in CSS
  • The basic syntax of the font fallbacks
  • How to use font fallbacks in CSS

So, without any delay let’s proceed!

Font Fallbacks

There is always a chance that a font not found on a specific platform or it is not installed properly on a device. Therefore, the font fallbacks are used as backup fonts i.e. we have to specify a list of backup fonts so that if the first font is not available then the browser should try the next one, and so on. The font fallbacks are structured with five generic font families as mentioned below:

  • Serif Fonts in CSS: specify some little edgy strokes
  • Sans-serif Fonts in CSS: specify clean lines, no edges
  • Cursive Fonts in CSS: specify a style close to human writing
  • Fantasy Fonts in CSS: specify some fancy font styles

It is a good practice that to add the generic font family at the end of the list.

Syntax

The basic syntax of font fallbacks is described in the following snippet:

Here, in the font family, we specify two fonts, first one will be the browser’s first choice/web-safe font while the remaining will be the list of font fallbacks.

How to Use Font Fallbacks in CSS

Fonts have a great effect on the UI of any webpage so choosing the most suitable fallback font is very important i.e. choosing “Lucida Console” as a backup of the “Times New Roman” font wouldn’t be a good choice. Choosing a backup style within the same font family would be considered a good practice i.e. “Times” will be a better fallback for the “Times New Roman”.

Example

Let’s consider the below-given code to understand the concept of font fallback in CSS:

HTML

<body>

<h3>Fonts Fallbacks In CSS</h3>

<p> First Paragraph </p>

<p> Second Paragraph</p>

</body>

CSS

body{

  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;

}

Here in the above-given code, the browser will first try to specify the “Cambria” font style

  • If it is available then the entire body will be styled according to the “Cambria”.
  • If for some reason “Cambria” is not available then the browser will utilize the second option i.e. “Cochin”
  • Similarly the browser will use some other option if prior options don’t work properly:

The above output verifies that the browser utilizes the “Cambria” style.

Suppose the first font doesn’t work for some reason then the browser will utilize the fallback option as shown in the following screen:

Same code executed, but this time due to some reasons the “Cambria” font style is not available so the browser use the fallback option i.e. “Cochin”.

Conclusion

CSS font Fallbacks provide a backup for the fonts i.e. if one font doesn’t work properly then the browser will try the other one. For good coding practice write a generic font family at the end of the list and choose the font fallback within the same font family. This write-up demonstrated what is a font fallback, how it is structured, and how to use it.

About the author

Anees Asghar

I am a self-motivated IT professional having more than one year of industry experience in technical writing. I am passionate about writing on the topics related to web development.