Ashley Brown Ashley Brown - 2 months ago 6
CSS Question

Why does bootstrap have two fonts in Sass?

I was just about to change the default font with Bootstrap SASS and I found this:

//== Typography
//
//## Font, line-height, and color for body text, headings, and more.

$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;


What's the difference between sans-serif and serif in this context? Because if I inspect my page, all fonts are Helvetica Neue.

How is serif/Georgia utilised if all I'm seeing is Helvetica Neue being used?

Answer

Those are just options to change the base style for the font so if you want serif or sans-serif. They do this:

Create the three base styles:

$font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif !default;
$font-family-serif: Georgia, "Times New Roman", Times, serif !default;
$font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace !default;

Then set the sans-serif on a base var:

$font-family-base: $font-family-sans-serif !default;

And use that base to define the font-family for the body therefore all the document:

body {
   font-family: $font-family-base;
   font-size: $font-size-base;
   line-height: $line-height-base;
   color: $text-color;
   background-color: $body-bg;
}

The other options are there if you want to customize the theme and change quickly to serif or monospace all the document.