BootstrapHow-ToBeginner · 3 min read

How to Change Font in Bootstrap: Simple Steps

To change the font in Bootstrap, override the default font by adding custom CSS that sets the font-family on the body or specific elements. You can also include fonts from Google Fonts by linking them in your HTML and then applying them in your CSS.

📐

Syntax

To change fonts in Bootstrap, you mainly use CSS font-family property. You can apply it globally on the body tag or on specific Bootstrap classes.

body { font-family: 'Your Font', fallback, sans-serif; } sets the font for the whole page.
You can target specific elements like .btn or h1 to change fonts only there.
Include external fonts by adding a <link> tag in your HTML <head> section.

css

/* Global font change */
body {
  font-family: 'Arial', sans-serif;
}

/* Specific element font change */
h1 {
  font-family: 'Georgia', serif;
}

💻

Example

This example shows how to include a Google Font and apply it globally in Bootstrap by overriding the body font-family.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Font Change Example</title>
  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" />
  <style>
    body {
      font-family: 'Roboto', sans-serif;
    }
  </style>
</head>
<body>
  <div class="container mt-5">
    <h1>Welcome to Bootstrap</h1>
    <p>This text uses the Roboto font from Google Fonts.</p>
    <button class="btn btn-primary">Bootstrap Button</button>
  </div>
</body>
</html>

Output

A webpage with a heading, paragraph, and a blue Bootstrap button all using the Roboto font.

⚠️

Common Pitfalls

Not including the font link in the <head> section causes the font not to load.
Overriding Bootstrap fonts without enough CSS specificity may not work; use selectors like body or add !important carefully.
Using fonts that are not web-safe or not loaded will fallback to default fonts.
Changing fonts only on some elements without global consistency can make the design look inconsistent.

css

/* Wrong: Missing font link */
body {
  font-family: 'NonExistentFont', sans-serif;
}

/* Right: Include font link and then apply */
/* In HTML head: <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet" /> */
body {
  font-family: 'Roboto', sans-serif;
}

📊

Quick Reference

Summary tips to change fonts in Bootstrap:

Include external fonts via <link> in <head>.
Override font-family on body for global effect.
Use specific selectors for targeted font changes.
Check font loading in browser DevTools Network tab.
Ensure fallback fonts are specified for safety.

✅

Key Takeaways

Change Bootstrap fonts by overriding the CSS font-family property on the body or specific elements.

Include Google Fonts or other web fonts by linking them in the HTML head before applying in CSS.

Ensure your CSS selectors are specific enough to override Bootstrap defaults.

Always specify fallback fonts to maintain good appearance if custom fonts fail to load.

Use browser DevTools to verify fonts are loaded and applied correctly.