CSS: Fallback fonts

css font stack
css fonts
css font family list
css font-face
google fonts
font names
font color css
font-display fallback

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.

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 choses any serif font. You should use the monospace family.

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

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

CSS Web Safe Fonts, The font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems. If the  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.

CSS font-family property, 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  Commonly Used Font Combinations. The font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems. If the browser does not support the first font, it tries the next font. Start with the font you want, and end with a generic family,

You can also serve that obscure font with your website (if you are legally able to) using @font-face. It's easy and works even in IE6 :).

Read about it here: http://www.miltonbayer.com/font-face/

CSS: Fallback fonts, is more than one word, it must be in quotation marks, like: "Times New Roman". The CSS font properties define the font family, boldness, size, and the style of a text.

What is fallback font?, font-family: "Times New Roman" , for example. While it's perfectly legit to use the serif , sans-serif , monospace , cursive , and fantasy generic font family names, they are designed as a fallback for when preceding font families are not recognised. Their use at the end of a multiple font family list is advisable. This is really BAD advice because unless you specify fallback fonts in the stylesheet (and you aren’t telling people how), the browser will use whatever is the default for the browser/machine. Better advice, on the web if you want to use something besides Arial or Times, use Google fonts (like Roboto) and enqueue them.

Web Safe Fonts and Generic Font Family Fallbacks, So basically fallback fonts are used when the current font isn't available. For example, if your CSS selector looked like this: h1 { font-family:  The @font-face rule allows custom fonts to be loaded on a webpage. Once added to a stylesheet, the rule instructs the browser to download the font from where it is hosted, then display it as specified in the CSS. Without the rule, our designs are limited to the fonts that are already loaded on a user's computer,

CSS Fonts, This lets the browser select an acceptable fallback font when necessary. The font​-family property specifies a list of fonts, from highest priority to  If a user’s browser doesn’t support web fonts or they don't load for any reason, the fallback fonts in the CSS stack will be used instead. The font stack should contain at least one fallback font that is uniformly available across platforms (like Georgia or Arial), followed by a generic font-family name (like serif or sans-serif). If the browser can’t find the first font, then it will try the second font, and so on.

Comments
  • This "rather obscure font" you’re talking about? It’s included in every copy of Windows.
  • not sure why it only displays in some computers (all windows)
  • oh my mistake, the font name is "ocr a std"
  • an easy mistake to make. The names sound almost identical. :-p
  • p{font-family:"Lucida Console", "Courier New", monospace;} So this right here picks Lucida Console but falls back to Courier New if not available? Also, care to enlighten me what adding monospace does?
  • @Kevin: it means to fall back on the system’s default monospace fonts if none of the previous fonts is available. However, use this feature with care (read: not at all) because Safari will use it as a hint to adapt the font size of style, making it smaller. And there’s virtually no way to prevent this without setting a fixed font size (which is extremely bad style and will transport you directly into Dante’s Limbo).
  • @Rudolph, very nice info. Another question: having font-family:"ocr a std", "Lucida Console", "Courier New", monospace; will this be 3 fallback fonts?
  • @KevinDuke Yes, it'll fall back in the order you have specified.
  • One more tip: some gliphs are missing in Google fonts, like box drawing. Adobe's Source Code Pro and Mononoki are good workarounds.
  • Since this thread might still be active( has a average of 6 views per days), I'd just like to extend your comment and say STOP developing for IE6 ;)
  • @cammy Unless you work for the Chinese market ;). By the way, the important point in my answer is not IE6 of course.