Last active
June 16, 2024 18:15
-
-
Save jacrook/9009655 to your computer and use it in GitHub Desktop.
Sass Css Font Stack Variables
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
////////////////////////////////////////////////////////////// | |
// 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; |
Such a great collection ! Thanks mate !
Awesome! Thanks!
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;
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
Very Nice....