Bootstrap 5 font-family variable overriding not working

Question

I am using Proxima+Nova font for angular application

style.css

@import url('https://fonts.googleapis.com/css?family=Proxima+Nova');

Trying to override the root font with bootstrap variables as below

 $variable-prefix:             bs-;

 $font-family-sans-serif:        'proxima-nova', sans-serif;
 $font-family-base:            var(--#{$variable-prefix}font-sans-serif);

When loading the application Getting the default as from bootstrap core

:root {
 --bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

The variable overriding not working

Answer 1

You have several problems here.

1. Your font-family is defined as proxima-nova but as you can see here it's actually Proxima Nova. Use the correct name.

2. You are currently updating only the SCSS variable (with $) and not the CSS variable (with --). Since $font-family-sans-serif is not in use (at least in the example), it's not going to be in effect as it's only defined.

If you want to replace the base font with sans serif type, you should replace the SCSS variable inside the CSS variable like this:

:root {
 --bs-font-sans-serif: $font-family-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

If you don't want to use variable here, you could just add "Proxima Nova" there.

Haven't used bootstrap in ages but my main thing is CSS + SCSS. Untested & unchecked.

Answer 2

The issue for me was I need to provide bootstrap.min.css file before the style.scss file in angular.json file

"styles": ["./node_modules/bootstrap/dist/css/bootstrap.min.css", "src/styles.scss"],

style.scss

@import "../scss/theme.scss";

theme.scss

// 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
@import "../node_modules/bootstrap/scss/functions";

// 2. Include any default variable overrides here
@import "./custom_variables.scss";

// 3. Include remainder of required Bootstrap stylesheets
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";

// 4. Include any optional Bootstrap components as you like
@import "../node_modules/bootstrap/scss/root";
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
@import "../node_modules/bootstrap/scss/images";
@import "../node_modules/bootstrap/scss/containers";
@import "../node_modules/bootstrap/scss/grid";

// 5. Add additional custom code here

custome variable

$variable-prefix:             bs-;

 $font-family-sans-serif:        'proxima-nova', sans-serif;
 $font-family-base:            var(--#{$variable-prefix}font-sans-serif);