CSS: Fallback fonts

Question

My website uses a rather obscure font that about half the computers can properly read. The font is "Lucida Console". On the computers that can't read this font, they get displayed ugly Times New Roman, is there a way to set the font of my website to Lucida Console but on computers that can't read it, view Arial instead? Using CSS.

Answer 1

you can specify multiple fonts:

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

The browser will try the first one, if that one isn't available the second, and so forth. In the end it uses the family serif, so the browser chooses any serif font. You should use the monospace family.

So in your case, something like this is what you want:

p {     font-family: "Lucida Console", "Courier New", monospace; } 

Answer 2

Further tips:

• Google css font stack for suggested lists of fonts aimed at certain styles of fonts. 'font stack' is the colloquial name for these font lists.
• Think cross-platform. Consider adding fonts commonly found on Mac, Linux, iOS, Android, Windows, and other platforms your readers may be using.
• Always include a generic-family name at the end of your font stack in case the user has none of your desired fonts:
  • serif
  • sans-serif
  • cursive
  • fantasy
  • monospace
• Include quotes around fonts named with multiple words, or simply quote all font names.