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 enterfont-family
- Copy all the selectors with
font
orfont-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.
- Visit Bootswatch.com
- Choose the theme you want
- 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
}