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
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
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;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With