Customization

How to Change Fonts and Typography in Bootstrap 5

By the bootstrap.build team · 8 min read · Published

Typography sets the tone of an interface more than almost anything else, and Bootstrap makes it easy to change. To swap the font, point $font-family-base at your font before importing Bootstrap (and actually load the font file); to change the scale, set $font-size-base and the heading sizes. This guide shows both the Sass route and the no-setup builder route, plus the font-loading details that decide whether your type looks fast or janky. It pairs with the complete guide to customizing Bootstrap 5.

The quick way: pick a font in the browser

Open the visual builder and choose the “Typography” section. Set the base font, adjust the base size and line height, and watch headings, paragraphs, buttons, and form labels restyle together in the live preview. Pairing a body and a display font is much easier when you can see them on a real UI kit instead of guessing. When you like it, export _variables.scss or the compiled CSS and skip to “Use your exported file”.

How Bootstrap’s type system works

Bootstrap derives almost all text styling from a handful of Sass variables:

  • $font-family-base sets the body font. By default it points at the system font stack via $font-family-sans-serif (fast, no download).
  • $font-size-base (default 1rem) is the root size everything else scales from.
  • $line-height-base (default 1.5) controls body leading.
  • Headings use $headings-font-family, $headings-font-weight, and $headings-line-height, plus the per-level sizes $h1-font-size through $h6-font-size.
  • $font-family-monospace styles <code>, <pre>, and <kbd>.

Change the base values and the whole document moves with them.

Set a custom font with Sass

Point $font-family-base at your font before importing Bootstrap, keeping the override order (functions, then your variables, then Bootstrap):

@import "bootstrap/scss/functions";

$font-family-base: "Inter", system-ui, sans-serif;
$headings-font-weight: 600;

@import "bootstrap";

That single $font-family-base change re-renders body text, buttons, inputs, navs, and more. But the variable only names the font; you also have to load it (see below) or the browser falls back to the next item in the stack. The system-ui, sans-serif fallback is deliberate: it keeps text readable instantly while the webfont loads.

Use a separate display font for headings

Want one font for body and another for headings? Set $headings-font-family:

@import "bootstrap/scss/functions";

$font-family-base:     "Inter", system-ui, sans-serif;
$headings-font-family: "Fraunces", Georgia, serif;

@import "bootstrap";

A distinct display font on headings is the single most effective way to make a Bootstrap theme stop looking like default Bootstrap.

Load the font the fast way

This is the step most tutorials skip, and it is what separates crisp type from a flash of invisible or unstyled text. Load fonts with <link> in your HTML <head>, not with @import inside your CSS, because a CSS @import blocks rendering until it resolves:

<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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

Three things matter here:

  • preconnect opens the connection to the font host early, shaving latency.
  • display=swap shows fallback text immediately, then swaps in the webfont, so users never stare at invisible text.
  • Request only the weights you use (here 400-700). Loading every weight of a family is a common, invisible source of page weight.

For the largest above-the-fold text, you can go further and <link rel="preload"> the specific woff2 file. Match the weights you load to the weights you reference (for example, if you set $headings-font-weight: 600, make sure 600 is in the request) or that style silently falls back.

Tune the type scale

Headings are defined relative to $font-size-base, so you can rescale the whole system proportionally:

@import "bootstrap/scss/functions";

$font-size-base:   1.0625rem;   // ~17px body text
$line-height-base: 1.6;
$h1-font-size:     $font-size-base * 2.75;
$h2-font-size:     $font-size-base * 2.1;
$headings-line-height: 1.15;

@import "bootstrap";

Bootstrap also ships Responsive Font Sizes (RFS), enabled by default, which gently scales large headings down on small screens, so your $h1 stays readable on mobile without media queries.

Adjust text at runtime with CSS variables

Bootstrap 5.3 exposes type tokens as CSS custom properties such as --bs-body-font-family, --bs-body-font-size, and --bs-body-line-height, handy for a scoped change with no recompile:

.docs {
  --bs-body-font-family: Georgia, serif;
  --bs-body-line-height: 1.7;
}

Use Sass variables to define your theme (they also feed the heading scale and component sizing); use CSS variables for local tweaks. The mechanics of both are in Bootstrap Sass variables explained.

Common mistakes

  • Setting $font-family-base but never loading the font. The name resolves to nothing and you get the fallback. Add the <link>.
  • Loading the font but not the weight you use. If $headings-font-weight is 600 and you only requested 400, headings render in a faux-bold or fall back.
  • Using @import in CSS to load fonts. It blocks rendering; prefer <link> in the head.
  • Requesting every weight and style. Ship only what you use to keep the page light; see how to shrink Bootstrap’s CSS for the same principle applied to CSS.

Use your exported file

Drop the exported _variables.scss into your override slot (after functions, before the rest of Bootstrap), make sure the font is loaded with a <link>, and recompile. Exported the compiled CSS instead? Link bootstrap.min.css, add the font link, and you are set. Full export details: how to export a Bootstrap theme.

Next steps

With your font and scale dialed in, the finishing touches are color and spacing. The fastest way to balance all three is the visual builder: adjust a value, see it instantly across a full Bootstrap UI kit, and export real Sass and CSS.

FAQ

How do I change the font in Bootstrap 5?

Set $font-family-base before importing Bootstrap, for example $font-family-base: "Inter", system-ui, sans-serif;, and load the font with a <link> in your HTML head. The variable names the font; the link downloads it.

How do I use a different font for headings?

Set $headings-font-family to your display font (and load it). Body text keeps $font-family-base, headings use the display font, which is the quickest way to give a theme its own character.

How do I change the base font size in Bootstrap?

Override $font-size-base (default 1rem). Because the heading sizes are defined relative to it, changing this one value rescales the entire type system proportionally.

Why is my custom font not showing in Bootstrap?

Usually the font is named in $font-family-base but never actually loaded, so the browser uses the fallback. Add the Google Fonts (or self-hosted) <link>, and make sure you requested the weights you reference.

Try it in the builder

Make these changes visually with a live preview, then export clean Bootstrap Sass or CSS.

Open the Builder