CODEWITHSUNDEEP
cssfonts
dukevin
dukevin

Reputation: 23198

CSS: Fallback fonts

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.

Upvotes: 35

Views: 80358

Answers (3)

Jaxan
Jaxan

Reputation: 986

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;
}

Upvotes: 62

Basil Bourque
Basil Bourque

Reputation: 340118

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.

Upvotes: 9

kapa
kapa

Reputation: 78741

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/

Upvotes: 4

Related Questions