Bootstrap 4 Roboto font family

Question

I'm new to Bootstrap, I have version 4.1.1 installed locally (node.js, npm, gulp and sass).

Sorry if this is a dumb question, but do I have to import the Roboto font family from Google, or is this font already imported by Bootstrap? I don't want to add any redundant css.

Thanks! Bob :)

Answer 1

Font stacks for websites have definitely been evolving over the past couple of years, so it is definitely not a bad question.

My first approach in checking how [email protected] imports/implements the Roboto font in the framework would be to open up the bootstrap.css file which can be located here:

node_modules/bootstrap/dist/css/bootstrap.css

and then perform a quick text search for the term "Roboto" and see if there are any matches in the file. After doing this, you will see that line 34 yields the first match and appears as such:

--font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

We can tell that there is some type of implementation for the Roboto font. Let's double check the raw scss files that compile the distribution ready assets and see how it is implemented there for further insight, which can be located here:

node_modules/bootstrap/scss/_variables.scss

and then we will do another quick text search for "Roboto" which yields 1 result found on line 234 and appears as such:

$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

At first glance, we notice that bootstrap isn't importing the Roboto font from Google Fonts.. So, what's going on? Bootstrap is leveraging system font stacks to be used in the browser by utilizing built-in shorthand properties that work with the font short hand property. A more in-depth explanation can be found in this article: The New System Font Stack?. As noted in the article there are pros and cons with relying on system fonts and the font that will be rendered is the first font available on the users machine.

If you want to provide a more reliable and consistent way to make sure the Roboto font is rendered where you deem appropriate then I would import the font directly from Google Fonts found here: Roboto - Google Fonts (or you can setup static assets for the Roboto font family as described here: Google Roboto Font - Git Repository, if you would like to avoid pulling in external sources).

When on this page, click on "Family Selected" and notice how you will declare the font-family as:

font-family: 'Roboto', sans-serif;

Notice how we will no longer rely on the built-in keywords for the font shorthand property by means of the system font stack by using Roboto and instead will use 'Roboto' to refer to the font families imported from Google Fonts. So if you simply add this link in your header:

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

You can now declare all h1 tags to use the Roboto font family as such:

h1 { font-family: 'Roboto', sans-serif; }

as opposed to relying on the system font stacks (and possibly not rendering your preferred font) as such:

h1 { font-family: Roboto; }

Hope this helps some and happy coding!

Answer 2

Bootstrap does not include any fonts, it relies on system fonts. So, if you want to use any Google Font (or other), you have to import it yourself.

To do so, you can add:

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

Google makes some other suggestions when you import a font, that will help performance:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">