How do I add a Google Font to Bootstrap 5?

Add the Google Fonts link tag in your HTML head, then override Bootstrap's font CSS variable: . Then in CSS: :root { --bs-font-sans-serif: 'Inter', sans-serif; }.

Should I self-host Google Fonts instead of using their CDN?

Self-hosting avoids a third-party DNS lookup and connection, slightly improving load time, and avoids sending user data to Google's servers (relevant for GDPR in the EU). For most projects the Google CDN is fine and simpler — self-host if you need maximum performance or strict privacy compliance.

What font does Bootstrap 5 use by default?

Bootstrap 5's default font stack is system-ui based: -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif — it uses whatever native font is on the user's OS rather than loading a web font, which is fast but not very distinctive.

Which Google Font pairs well with Bootstrap 5?

Inter is the most popular choice for SaaS/admin dashboards — designed specifically for UI legibility at small sizes. Poppins and Manrope work well for marketing sites needing more personality. Source Sans Pro is a safe, professional choice close to Bootstrap's native system font feel.

Bootstrap 5 Google Fonts — How to Add Custom Fonts

Bootstrap 5's default font is a system font stack — fast but generic. Adding a Google Font gives your site a distinct identity. Here's every method, from quickest to most optimized.

Method 1: CDN Link + CSS Variable Override (Fastest)

This is the quickest way and works with both CDN Bootstrap and compiled Bootstrap — no Sass required.

Step 1: Add the Google Fonts link in <head>, before Bootstrap's CSS:

<head>
  <!-- Google Font -->
  <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">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>

Step 2: Override Bootstrap's font CSS variable, after Bootstrap's CSS link:

<style>
  :root {
    --bs-font-sans-serif: 'Inter', system-ui, -apple-system, sans-serif;
  }
  body {
    font-family: var(--bs-font-sans-serif);
  }
</style>

That's it. Every Bootstrap component — headings, buttons, forms, navbar — now uses Inter instead of the system font.

The rel="preconnect" tags tell the browser to start the connection to Google's font servers earlier, shaving a small amount of load time.

Method 2: Sass Variable Override (Most Control)

If you're compiling Bootstrap from source with Sass, override the variable before importing:

// _variables.scss — override BEFORE importing Bootstrap
$font-family-sans-serif: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
$font-family-monospace: 'JetBrains Mono', SFMono-Regular, Menlo, monospace;

// Optional: adjust related typography variables
$font-size-base: 0.9375rem;     // 15px instead of 16px
$headings-font-weight: 700;     // bolder headings with Inter
$line-height-base: 1.6;

// Then import Bootstrap
@import 'bootstrap/scss/bootstrap';

<!-- Still need the Google Fonts link in HTML -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">

This approach generates the font into every Bootstrap component's compiled CSS, rather than relying on a CSS variable override at runtime. Slightly more efficient and gives you control over related variables like $headings-font-weight.

Method 3: Self-Hosted Fonts (Best Performance)

Avoids the extra DNS lookup to Google's servers and keeps everything on your own domain:

Step 1: Download the font files from Google Fonts or use google-webfonts-helper to get .woff2 files.

Step 2: Add @font-face declarations:

/* fonts.css */
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

Step 3: Reference it the same way:

:root {
  --bs-font-sans-serif: 'Inter', system-ui, sans-serif;
}

font-display: swap shows the fallback system font immediately, then swaps to your custom font once it loads — prevents invisible text while the font downloads (a Core Web Vitals concern).

Recommended Fonts for Bootstrap Projects

Font	Best for	Why
Inter	Admin dashboards, SaaS apps	Purpose-built for UI legibility at small sizes
Manrope	Modern marketing sites	Distinctive but still very readable
Poppins	Landing pages, bold headlines	Geometric, friendly, great for big headings
Source Sans Pro	Conservative/corporate sites	Professional, close to native system font feel
DM Sans	Tech/startup sites	Clean, slightly rounded, modern feel
JetBrains Mono	Code blocks, technical docs	Excellent monospace readability

I use Inter on most of my Bootstrap admin dashboard projects — it's specifically designed for screens and UI, which matches what Bootstrap is built for.

Applying Different Fonts to Headings vs Body

Sometimes you want a distinctive display font for headings and a readable font for body text:

<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&family=Inter:wght@400;500&display=swap" rel="stylesheet">

<style>
  :root {
    --bs-font-sans-serif: 'Inter', system-ui, sans-serif;
  }
  h1, h2, h3, h4, h5, h6,
  .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: 'Poppins', sans-serif;
  }
</style>

This gives headings personality (Poppins) while keeping body text highly readable (Inter) — a common pattern on marketing and landing pages.

Performance Considerations

Only load the font weights you actually use. Don't request all 9 weights if you only use 400, 600 and 700.
&display=swap in the Google Fonts URL prevents invisible text during load — always include it.
Self-host if you need the absolute best performance or have privacy compliance requirements (GDPR concerns about sending visitor IPs to Google's CDN).
Use font-display: optional instead of swap if a layout shift from font swapping is more disruptive than briefly showing the fallback font.

<!-- Only request the weights you need -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
<!-- NOT this — loads way more than needed -->
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap" rel="stylesheet">

Bootstrap 5 Google Fonts — How to Add Custom Fonts

Method 1: CDN Link + CSS Variable Override (Fastest)

Method 2: Sass Variable Override (Most Control)

Method 3: Self-Hosted Fonts (Best Performance)

Recommended Fonts for Bootstrap Projects

Applying Different Fonts to Headings vs Body

Performance Considerations

Frequently Asked Questions

Need a Full Bootstrap 5 Admin Dashboard?

Related Components

Bootstrap 5 Google Fonts — How to Add Custom Fonts

Method 1: CDN Link + CSS Variable Override (Fastest)

Method 2: Sass Variable Override (Most Control)

Method 3: Self-Hosted Fonts (Best Performance)

Recommended Fonts for Bootstrap Projects

Applying Different Fonts to Headings vs Body

Performance Considerations

Frequently Asked Questions

Need a Full Bootstrap 5 Admin Dashboard?

Related Components

Bootstrap 5 Typography Tutorial

Bootstrap 5 Custom Sass Variables

How to Reduce Bootstrap 5 File Size