Code Snippet

Home » Code Snippets » CSS » Font Stacks

Font Stacks

/* Times New Roman-based stack */
font-family: Cambria, "Hoefler Text", Utopia, "Liberation Serif", "Nimbus Roman No9 L Regular", Times, "Times New Roman", serif;

/* Modern Georgia-based serif stack */
font-family: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

/* Traditional Garamond-based serif stack */
font-family: "Palatino Linotype", Palatino, Palladio, "URW Palladio L", "Book Antiqua", Baskerville, "Bookman Old Style", "Bitstream Charter", "Nimbus Roman No9 L", Garamond, "Apple Garamond", "ITC Garamond Narrow", "New Century Schoolbook", "Century Schoolbook", "Century Schoolbook L", Georgia, serif;

/* Helvetica/Arial-based sans serif stack */
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;

/* Verdana-based sans serif stack */
font-family: Corbel, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;

/* Trebuchet-based sans serif stack */
font-family: "Segoe UI", Candara, "Bitstream Vera Sans", "DejaVu Sans", "Bitstream Vera Sans", "Trebuchet MS", Verdana, "Verdana Ref", sans-serif;

/* Impact-based sans serif stack */
font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;

/* Monospace stack */
font-family: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace;

Reference URL

Subscribe to The Thread

  1. Giovanni Mattucci

    I’ve used some font stacks before such as one that included “Helvetica Neue”, and the system font didn’t display properly on the screen. I had to abandon it.

    Perhaps typefaces at certain sizes on a web page break down?

    Reply ↓
  2. Blaze Pollard

    I enjoy this.

    Reply ↓
  3. Ant

    My favorite font-stack is:

    font-family:sans-serif;

    Reply ↓
  4. Ryan

    Chris,

    For people copying and pasting these stacks can you change an error in the first stack?
    “DejaVu Serif,”

    Should be
    “DejaVu Serif”,

    Thanks! Love your work!

    Reply ↓
  5. mARK

    Max Black et al, please consider system stress when downloading junkyard typefaces to boxed in fools who think every font in a font family has to be installed on their system (s). LOL! This is not to detract in any way from simply and naturally and vibrantly good work done on codestyles.org (more than meets the eye). But … Use only bought fonts acquired personally from Agfa, Adobe, Microsoft, ITC and other monotype accredited “agents” report any aberrant behavior to as many foundaries as you can. When you have done so, delete all your irrational posts … or edit them to clearly demonstrate why junkyards don’t belong in any serious thread [Max, G u could have more to say there than anyone in region “?” – wherever you are. Amen. BURB this comment be kerneled from dead center of the junkiest skunk pile ever to stale in cyberspace.

    Yes Ryan, lovely work by Chris, best snippets tonic in the world. Even though Ctrl-A is a little berserk.

    Cheer up! This snippet got it wrong at the end of almost every line. Given the ugly comments arising from the disgusting visual insult of a generic font on today’s colorful Internet, Chris’ font family efforts are missing just one feature that attends to the frequency of installed fonts: five foundation fonts each corrrespond to exactly one most popular variant of that typeface for each OS-type. For example, serif ‘owns’ Times New Roman (Win), Times (Mac) and Century Schoolbook L (Uni): in any order, these three typefaces should be placed immediately to the left of “serif”. They are set to knock out 99.9-100% of anything that follows them. Like wise the other four branches. Then a web font script should be applied to the properly stacked web site ~ current best practice.

    You can travel at speed along any highway, but if you are going backwards, that’s not a good thing. There are ten kinds of drivers in this world, one is binary, and the other is lost.

    Reply ↓
  6. Denis

    Hey Chris,

    I just created a visual font stack library that just allows you to click a button to copy a font stack and paste into your css. I included all the standard stacks but it will definitely grow with some fancier, less common stacks. You can find it at cssfontstack.com.

    Comments and suggestions are more then welcome.

    Reply ↓
  7. Drew

    @Denis – Nice little tool congrats.

    Reply ↓
  8. kontur

    Personally, I wouldn’t use any fontstack that has fonts in it that I did not test myself for the layout in question. While those font-stacks are a nice reference, I’d like to utter a word of caution about blindly using them as such ;)

    Reply ↓
  9. FlowFu

    The “sans serif” fallback in each list is missing its dash, they should be “sans-serif”

    Reply ↓

Speak, my friend

At this moment, you have an awesome opportunity* to be the person your mother always wanted you to be: kind, helpful, and smart. Do that, and we'll give you a big ol' gold star for the day (literally).

Posting tips:
  • You can use basic HTML
  • When posting code, please turn all
    < characters into &lt;
  • If the code is multi-line, use
    <pre><code></code></pre>
Thank you,
~ The Management ~