How to override default font weights in Bootstrap

Question

I am importing a font that does not have a font weight of 500 natively (which is one of the font weights used by Bootstrap out of the box). How do I change the defaults. I looked here: https://getbootstrap.com/docs/4.1/getting-started/theming/#variable-defaults

Answer 1

You would use SASS and set the appropriate font variables. The 500 weight is only used for $headings-font-weight by default. Set the weights according to whatever weights are available in the font you're importing.

/* set font variable customizations */
$font-family-base: 'Montserrat', sans-serif; 

$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-bold: 700; 
$headings-font-weight: 800;

/* remember to import Bootstrap after the changes */ 
@import "bootstrap";

Demo: https://codeply.com/go/tjqFpMnjfa

---

Related: How to extend/modify (customize) Bootstrap 4 with SASS

Answer 2

The default font-weight is 400, although the default heading weight is 500. This is an excerpt from _variables.scss, you can see all variables there:

$font-weight-light:           300 !default;
$font-weight-normal:          400 !default;
$font-weight-bold:            700 !default;

$font-weight-base:            $font-weight-normal !default;

Answer 3

If you download the source files for Bootstrap 4, they include SASS files for their entire CSS. The font weights can be modified in the _variables.scss file. There is more than one font-weight setting (buttons, headings, etc), so just search for "font-weight" and see the options. After making the changes, you'll have to recompile the CSS for it to work.