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
How to Add HTML Code to Jsf Facesmessage
How to Format Code in HTML/CSS/Js/ PHP
Number Input - Always Show Spin Buttons
How to Get The HTML5 Audio's Duration Time
HTML: Cursor Showing in Readonly Input Text
Converting HTML Text into Plain Text Using Objective-C
Block Level Element Vs Block Formatting Context
Why Does 100% Not Mean 100% Height
How to Detect Only with CSS Mobile Screens
How to Put Img Inline with Text
Load Iframe Links into Parent Window
How to Hide Full Screen Button of The Video Tag in HTML5
How to Display Excel Sheet in HTML Page
<H1>, <H2>, <H3>... Tags, Inline Within Paragraphs (<P>)
How to Semantically Provide a Caption, Title or Label for a List in HTML