Common font fallbacks

I quite like @yesiamrocks’s CSS fallback fonts repository. It contains a lot of common CSS fallback chains. My only gripe is that I can’t see the fonts in use. Here, I’ve taken the liberty of converting the Markdown to some HTML with examples of each CSS chunk.

Keep in mind that if you don’t have the fonts installed on your system, you will see the first fallback that is installed. Any browser worth its salt will let you see this using its development tools. For example, here’s how to do it in Firefox.

Regrettably, it is not possible to highlight failing fonts, as doing so would allow for easy fingerprinting. This exact issue has been discussed by the CSS Working Group.

This document is split into 3 sections:

Sans-serif fonts

Arial

To use Arial on your webpage, copy the following CSS rule.

body {
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Arial Black

To use Arial Black on your webpage, copy the following CSS rule.

body {
	font-family: "Arial Black", "Arial Bold", Gadget, sans-serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Arial Narrow

To use Arial Narrow on your webpage, copy the following CSS rule.

body {
	font-family: "Arial Narrow", Arial, sans-serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Arial Rounded MT Bold

To use Arial Rounded MT Bold on your webpage, copy the following CSS rule.

body {
	font-family: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Century Gothic

To use Century Gothic on your webpage, copy the following CSS rule.

body {
	font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Calibri

To use Calibri on your webpage, copy the following CSS rule.

body {
	font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Candara

To use Candara on your webpage, copy the following CSS rule.

body {
	font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Avant Garde

To use Avant Garde on your webpage, copy the following CSS rule.

body {
	font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Helvetica

To use Helvetica on your webpage, copy the following CSS rule.

body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Franklin Gothic Medium

To use Franklin Gothic Medium on your webpage, copy the following CSS rule.

body {
	font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Futura

To use Futura on your webpage, copy the following CSS rule.

body {
	font-family: Futura, "Trebuchet MS", Arial, sans-serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Impact

To use Impact on your webpage, copy the following CSS rule.

body {
	font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif";
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Tahoma

To use Tahoma on your webpage, copy the following CSS rule.

body {
	font-family: Tahoma, Verdana, Segoe, sans-serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Segoe UI

To use Segoe UI on your webpage, copy the following CSS rule.

body {
	font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Geneva

To use Geneva on your webpage, copy the following CSS rule.

body {
	font-family: Geneva, Tahoma, Verdana, sans-serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Optima

To use Optima on your webpage, copy the following CSS rule.

body {
	font-family: Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Gill Sans

To use Gill Sans on your webpage, copy the following CSS rule.

body {
	font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Trebuchet MS

To use Trebuchet MS on your webpage, copy the following CSS rule.

body {
	font-family: "Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Lucida Grande

To use Lucida Grande on your webpage, copy the following CSS rule.

body {
	font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Verdana

To use Verdana on your webpage, copy the following CSS rule.

body {
	font-family: Verdana, Geneva, sans-serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Serif fonts

Big Caslon

To use Big Caslon on your webpage, copy the following CSS rule.

body {
	font-family: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Didot

To use Didot on your webpage, copy the following CSS rule.

body {
	font-family: Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Lucida Bright

To use Lucida Bright on your webpage, copy the following CSS rule.

body {
	font-family: "Lucida Bright", Georgia, serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Baskerville

To use Baskerville on your webpage, copy the following CSS rule.

body {
	font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Hoefler Text

To use Hoefler Text on your webpage, copy the following CSS rule.

body {
	font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Goudy Old Style

To use Goudy Old Style on your webpage, copy the following CSS rule.

body {
	font-family: "Goudy Old Style", Garamond, "Big Caslon", "Times New Roman", serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Cambria

To use Cambria on your webpage, copy the following CSS rule.

body {
	font-family: Cambria, Georgia, serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Rockwell

To use Rockwell on your webpage, copy the following CSS rule.

body {
	font-family: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Times New Roman

To use Times New Roman on your webpage, copy the following CSS rule.

body {
	font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Perpetua

To use Perpetua on your webpage, copy the following CSS rule.

body {
	font-family: Perpetua, Baskerville, "Big Caslon", "Palatino Linotype", Palatino, "URW Palladio L", "Nimbus Roman No9 L", serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Bodoni MT

To use Bodoni MT on your webpage, copy the following CSS rule.

body {
	font-family: "Bodoni MT", Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Georgia

To use Georgia on your webpage, copy the following CSS rule.

body {
	font-family: Georgia, Times, "Times New Roman", serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Palatino

To use Palatino on your webpage, copy the following CSS rule.

body {
	font-family: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Rockwell Extra Bold

To use Rockwell Extra Bold on your webpage, copy the following CSS rule.

body {
	font-family: "Rockwell Extra Bold", "Rockwell Bold", monospace;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Garamond

To use Garamond on your webpage, copy the following CSS rule.

body {
	font-family: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Book Antiqua

To use Book Antiqua on your webpage, copy the following CSS rule.

body {
	font-family: "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Calisto MT

To use Calisto MT on your webpage, copy the following CSS rule.

body {
	font-family: "Calisto MT", "Bookman Old Style", Bookman, "Goudy Old Style", Garamond, "Hoefler Text", "Bitstream Charter", Georgia, serif;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Monospace fonts

Lucida Console

To use Lucida Console on your webpage, copy the following CSS rule.

body {
	font-family: "Lucida Console", "Lucida Sans Typewriter", monaco, "Bitstream Vera Sans Mono", monospace;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Andale Mono

To use Andale Mono on your webpage, copy the following CSS rule.

body {
	font-family: "Andale Mono", AndaleMono, monospace;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Courier New

To use Courier New on your webpage, copy the following CSS rule.

body {
	font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Monaco

To use Monaco on your webpage, copy the following CSS rule.

body {
	font-family: monaco, Consolas, "Lucida Console", monospace;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Consolas

To use Consolas on your webpage, copy the following CSS rule.

body {
	font-family: Consolas, monaco, monospace;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Lucida Sans Typewriter

To use Lucida Sans Typewriter on your webpage, copy the following CSS rule.

body {
	font-family: "Lucida Sans Typewriter", "Lucida Console", monaco, "Bitstream Vera Sans Mono", monospace;
}

The following is an example of the font in use.

The quick brown fox jumped over the lazy dog.

Conclusion

Those are all the fonts @yesiamrocks included! I’ll leave you to your decision parallysis now…