How to Change The Bootstrap Default Font Family Using Font from Google

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

use !important to override css.
Example -

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

How to switch the global font family and update $font-family-base in bootstrap

html,* {
font-family: '--apple-system','san-serif',
font-size:16px;
}

Bootstrap 5: How to add a $font-family-serif variable

Bootstrap (in its SCSS source format) is a framework - a stating point if you will - so it's expected that you add your own variables & elements and/or modify the existing ones. There is no $font-family-serif because its just not required for that core code.

As to how to customise - start with https://getbootstrap.com/docs/5.0/customize/sass

Why was it omitted? - Refactoring. Removing "dead code" (obsolete variables, parameters, fields, methods and/or class') is a very common "code cleaning" practice. A serif font is just not used, so it got deleted. (Not even in BS3 was it "used". It was declared, but not referenced in anything except the customizer.)

But that's the beauty of frameworks - you can just add/delete/change it yourself. :)

how to override bootstrap font family?

Be sure that your link to css is after your link to bootstrap which would help you to override it.
For eg:

<html lang="" dir="ltr">  <link rel="stylesheet" href="bootstrap.css">  <link rel="stylesheet" href="style.css"> <!-- Your Style -->  <body>
</body></html>

How to force Bootstrap font style on element

You should use the Bootstrap CSS Variable: --bs-body-font-family. This way you are not repeating code and, you don't have to update your styles if you decide to customize and recompile Bootstrap.

/* custom.css */

.custom {
font-family: serif;
padding: 0.5rem;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link href="custom.css" rel="stylesheet">

<p>This is a plain <code>p</code> tag with no class.</p>

<p class="custom">
This <code>p.custom</code> is rendered with <code>font-family: serif</code> from the external custom.css stylesheet.
</p>

<p class="custom" style="font-family: var(--bs-body-font-family);">
This <code>p.custom</code> is rendered with <code>font-family: var(--bs-body-font-family)</code> from the style property. This could also be applied in an embedded stylesheet, or an additional external stylesheet loaded after bootstrap.css, which should
be loaded before custom.css.
</p>

How to change bootstrap.css font-family HTML to my own downloaded font

Just use following CSS to your CSS file which should include after bootstrap..

@font-face {
font-family: <Your-font>;
src: url(<your-font-path>);
}
html, body {
font-family: <Your-font>, sans-serif; /*Specify your font name here*/
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}


Related Topics



Leave a reply



Submit