Introduction

Bootstrap takes care of most (if not all) of a project's CSS, from components to utilities and fonts. While this can be great for many projects, it can also be difficult for front-end developers looking to add a specific style or typeface to their site to change these styles without resorting to hacky drop-ins or separate font classes for elements.

This tutorial demonstrates several ways to change the font of your website without modifying the Bootstrap library or breaking your stylesheets.

Note: This tutorial has been updated to work with Bootstrap 5.

Creating a custom build

This method takes advantage of the Themestr app, which allows you to customise Bootstrap. Themestr can change the SCSS variables that Bootstrap uses, including those for the font-family property. It then produces a new Bootstrap build (CSS file) which you can download and drop into your project without making any changes to other source files.

While this method is by far the easiest - taking a minute or two - you will have to host your Bootstrap build, meaning you'll miss out on the benefits of CDNs.

• Visit the Themestr app
• Scroll to the "fonts" section
• Modify the values for the $font-family-sans-serif, $font-family-monospace, $font-family-base and $font-size-base variables
• Download and include the CSS stylesheet in your HTML

Changing fonts using CSS rules from Bootstrap

Although this method does require a manual search of the Bootstrap source file and could be prone to human error - I.E. Missing a font-family declaration could result in inconsistencies in your stylesheet - in some cases, it is a better choice than creating a new Bootstrap build.

• Open your Bootstrap copy in your editor
• Press ctrl+f and enter font-family
• Copy all the selectors with font or font-family declarations
• Paste those selectors and rules in another stylesheet
• Remove the rules that don't have anything to do with font styles

After going through these steps, you should end up with a set of rules similar to these:

html {
  font-family: sans-serif
}
body {
  font-family: sans-serif
}
code, kbd, pre, samp {
  font-family: monospace
}
button, input, optgroup, select, textarea {
  font-family: inherit
}
.tooltip {
  font-family: sans-serif
}
.popover {
  font-family: sans-serif
}
.text-monospace {
  font-family: monospace
}

Which we could then simplify

html, body, .tooltip, .popover {
  font-family: sans-serif
}
code, kbd, pre, samp, .text-monospace {
  font-family: monospace
}
button, input, optgroup, select, textarea {
  font-family: inherit
}

Before changing the values of the font-family property

html, body, .tooltip, .popover {
  font-family: "Noto Sans", sans-serif
}
code, kbd, pre, samp, .text-monospace {
  font-family: "Noto Mono", monospace
}
button, input, optgroup, select, textarea {
  font-family: inherit
}

You can also add rules to modify the fonts of other elements, allowing you to keep all font-family properties in one location:

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-1, .display-2, .display-3,
.display-4, .display-5, .display-6 {
  font-family: "Noto Serif", sans-serif;
  font-weight: bold
}
html, body, .tooltip, .popover {
  font-family: "Noto Sans", sans-serif
}
code, kbd, pre, samp, .text-monospace {
  font-family: "Noto Mono", monospace
}
button, input, optgroup, select, textarea {
  font-family: inherit
}

Honorable mention: Bootswatch themes

While not necessarily a fix, some people might prefer to visit and look at the available Bootstrap themes before attempting to implement their theme changes.

1. Visit Bootswatch.com
2. Choose the theme you want
3. Download the CSS file for the theme and drop it into your project

Not so honorable mention: Global font override

This quick and dirty solution is only suitable for small websites using a single font family because this solution overwrites the font-family property at the global level.

Remember that if you maintain a large project or a multifaceted site, your project's UX will suffer.

* {
  font-family: "Noto Sans", sans-serif !important
}