Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Sass Css Font Stack Variables
//////////////////////////////////////////////////////////////
// Font Variables (http://cssfontstack.com/)
//////////////////////////////////////////////////////////////
//
// Serif font-stacks
//
$baskerville-font-stack: "Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif !default;
$big-caslon-font-stack: "Bodoni MT", Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif !default;
$bodoni-mt-font-stack: "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif !default;
$book-antiqua-font-stack: "Calisto MT", "Bookman Old Style", Bookman, "Goudy Old Style", Garamond, "Hoefler Text", "Bitstream Charter", Georgia, serif !default;
$calisto-mt-font-stack: "Calisto MT", "Bookman Old Style", Bookman, "Goudy Old Style", Garamond, "Hoefler Text", "Bitstream Charter", Georgia, serif !default;
$cambria-font-stack: Cambria, Georgia, serif !default;
$didot-font-stack: Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif !default;
$garamond-font-stack: Garamond, Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif !default;
$georgia-font-stack: Georgia, Times, "Times New Roman", serif !default;
$goudy-old-style-font-stack: "Goudy Old Style", Garamond, "Big Caslon", "Times New Roman", serif !default;
$hoefler-text-font-stack: "Hoefler Text", "Baskerville old face", Garamond, "Times New Roman", serif !default;
$lucidia-bright-font-stack: "Lucida Bright", Georgia, serif !default;
$palatino-font-stack: Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif !default;
$perpetua-font-stack: Perpetua, Baskerville, "Big Caslon", "Palatino Linotype", Palatino, "URW Palladio L", "Nimbus Roman No9 L", serif !default;
$rockwell-font-stack: Rockwell, "Courier Bold", Courier, Georgia, Times, "Times New Roman", serif !default;
$rockwell-bold-font-stack: "Rockwell Extra Bold", "Rockwell Bold", monospace !default;
$times-new-roman-font-stack: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif !default;
//
// Sans-Serif font-stacks
//
$arial-font-stack: Arial, "Helvetica Neue", Helvetica, sans-serif !default;
$arial-black-font-stack: "Arial Black", "Arial Bold", Gadget, sans-serif !default;
$arial-narrow-font-stack: "Arial Narrow", Arial, sans-serif !default;
$arial-rounded-font-stack: "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif !default;
$avant-garde-font-stack: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif !default;
$calibri-font-stack: Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif !default;
$candara-font-stack: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif !default;
$century-gothic-font-stack: "Century Gothic", CenturyGothic, AppleGothic, sans-serif !default;
$frankin-gothic-font-stack: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif !default;
$futura-font-stack: Futura, "Trebuchet MS", Arial, sans-serif !default;
$geneva-font-stack: Geneva, Tahoma, Verdana, sans-serif !default;
$gill-sans-font-stack: "Gill Sans", "Gill Sans MT", Calibri, sans-serif !default;
$helvetica-font-stack: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$impact-font-stack: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans serif !default;
$lucida-grande-font-stack: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif !default;
//
// Google font-stacks
//
$lustria-font-stack: 'Lustria', serif !default;
$ubuntu-mono-font-stack: 'Ubuntu Mono', sans-serif !default;
$lato-font-stack: 'Lato', sans-serif !default;
$lora-font-stack: 'Lora', serif !default;
$ubuntu-font-stack: 'Ubuntu', sans-serif !default;
$ubuntu-condensed-font-stack: 'Ubuntu Condensed', sans-serif !default;
$roboto-font-stack: 'Roboto', sans-serif !default;
$roboto-condensed-font-stack: 'Roboto Condensed', sans-serif !default;
$roboto-slab-font-stack: 'Roboto Slab', serif !default;
$raleway-font-stack: 'Raleway', sans-serif !default;
$raleway-dots-font-stack: 'Raleway Dots', cursive !default;
$merriweather-font-stack: 'Merriweather', serif !default;
$merriweather-sans-font-stack: 'Merriweather Sans', sans-serif !default;
$quattrocento-font-stack: 'Quattrocento', serif !default;
$quattrocento-sans-font-stack: 'Quattrocento Sans', sans-serif !default;
@edwardbeckett
Copy link

edwardbeckett commented Aug 24, 2015

Very Nice....

@huy-tran
Copy link

huy-tran commented Dec 6, 2015

Such a great collection ! Thanks mate !

@firebuggirl
Copy link

firebuggirl commented Apr 12, 2016

Awesome! Thanks!

@robsonsobral
Copy link

robsonsobral commented Aug 25, 2016

Thank you for putting all of this together!

The first four serif font stacks are wrong:

/// @link http://www.cssfontstack.com/Baskerville
$baskerville-font-stack: Baskerville, 'Baskerville Old Face', 'Hoefler Text', Garamond, 'Times New Roman', serif !default;

/// @link http://www.cssfontstack.com/Big-Caslon
$big-caslon-font-stack: 'Big Caslon', 'Book Antiqua', 'Palatino Linotype', Georgia, serif !default;

/// @link http://www.cssfontstack.com/Bodoni-MT
$bodoni-mt-font-stack: 'Bodoni MT', Didot, 'Didot LT STD', 'Hoefler Text', Garamond, 'Times New Roman', serif !default;

/// @link http://www.cssfontstack.com/Book-Antiqua
$book-antiqua-font-stack: 'Book Antiqua', Palatino, 'Palatino Linotype', 'Palatino LT STD', Georgia, serif !default;

I don't know if the following font stack were available when you made this. There are five more sans serif font stacks:

/// @link http://www.cssfontstack.com/Optima
$optima-font-stack: Optima, Segoe, 'Segoe UI', Candara, Calibri, Arial, sans-serif !default;

/// @link http://www.cssfontstack.com/Segoe-UI
$segoe-font-stack: 'Segoe UI', Frutiger, 'Frutiger Linotype', 'Dejavu Sans', 'Helvetica Neue', Arial, sans-serif !default;

/// @link http://www.cssfontstack.com/Tahoma
$tahoma-font-stack: Tahoma, Verdana, Segoe, sans-serif !default;

/// @link http://www.cssfontstack.com/Trebuchet-MS
$trebuchet-font-stack: 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif !default;

/// @link http://www.cssfontstack.com/Verdana
$verdana-font-stack: Verdana, Geneva, sans-serif !default;

There are also some monospaced font stacks:

/// @link http://www.cssfontstack.com/Consolas
$consolas-font-stack: Consolas, monaco, monospace !default;

/// @link http://www.cssfontstack.com/Courier-New
$courier-font-stack: 'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace !default;

/// @link http://www.cssfontstack.com/Lucida-Console
$lucida-console-font-stack: 'Lucida Console', 'Lucida Sans Typewriter', monaco, 'Bitstream Vera Sans Mono', monospace !default;

/// @link http://www.cssfontstack.com/Lucida-Sans-Typewriter
$lucida-sans-typewriter-font-stack: 'Lucida Sans Typewriter', 'Lucida Console', monaco, 'Bitstream Vera Sans Mono', monospace !default;

/// @link http://www.cssfontstack.com/Monaco
$monaco-font-stack: monaco, Consolas, 'Lucida Console', monospace !default;

/// @link http://www.cssfontstack.com/Andale-Mono
$andale-font-stack: 'Andale Mono', AndaleMono, monospace !default;

And some weird things:

/// Fantasy
///
/// @link http://www.cssfontstack.com/Copperplate
$copperplate-font-stack: Copperplate, "Copperplate Gothic Light", fantasy !default;
///
/// @link http://www.cssfontstack.com/Papyrus
$papyrus-font-stack: Papyrus, fantasy !default;
///
///
/// Script
///
/// @link http://www.cssfontstack.com/Brush-Script-MT
$brush-font-stack: "Brush Script MT", cursive !default;

@robsonsobral
Copy link

robsonsobral commented Aug 25, 2016

One more thing! in Impact font stack, a - is missing on sans-serif:

$impact-font-stack: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif !default;

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment