CODEWITHSUNDEEP
htmlcssbootstrap-5
Kameron_Huggins
Kameron_Huggins

Reputation: 23

Is it not possible to change font family of <body> in Bootstrap 5?

The Font-Family changes for my heading tags, but my body tag keeps getting canceled out by the "_reboot.scss:50". Also when I inspect my webpage and toggle off the default "enter code herefont-family: var(--bs-body-font-family);" the font I have selected in the CSS works.

Tried Both Import and Link for the Google Font :

<style>
  @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;900&display=swap');
</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;900&display=swap" rel="stylesheet">

Css Selector :

body {
  font-family: 'Montserrat', sans-serif;
}

Upvotes: 2

Views: 4879

Answers (2)

Alexander Nied
Alexander Nied

Reputation: 13668

Overriding in CSS with !important will work, but it also means that your user's browser may download superfluous fonts. Bootstrap has recommended, idiomatic ways to customize your Bootstrap. For instance, if you are using SASS you can override variable defaults to set your own font as the Bootstrap font, something like:

// Required
@import "../node_modules/bootstrap/scss/functions";

// Default variable overrides
$font-family-sans-serif:      'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
// stylelint-enable value-keyword-case

// Required
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional Bootstrap components here
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc

I would recommend checking the docs to see if there is a more idiomatic way to approach this-- doing so usually comes with added benefits and better cohesion of styles throughout your project.

Upvotes: 3

Vidiya Prasanth Pappannan
Vidiya Prasanth Pappannan

Reputation: 723

use !important to override css. Example -

body {
  font-family: 'Montserrat', sans-serif !important;
}

Upvotes: 1

Related Questions