How can I change the Bootstrap default font family using font from Google?

Question

I am creating a blog site and I want to change the Bootstrap font. In my import CSS in header I added this font

<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>

How can I use this as my bootstrap default font?

score 102 · Answer 1 · edited Feb 04 '21 at 07:31

102

First of all, you can't import fonts to CSS that way.

You can add this code in HTML head:

<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>

or to import it in CSS file like this:

@import url("http://fonts.googleapis.com/css?family=Oswald:400,300,700");

Then, in your css, you can edit the body's font-family:

body {
  font-family: 'Oswald', sans-serif !important;
}

edited Feb 04 '21 at 07:31

advaiyalad

144
1
11

answered Jun 06 '14 at 07:58

otopic

1,170
1
7
5

13

This approach neglects the sophisticated theming approach used by Bootstrap 4: https://getbootstrap.com/docs/4.4/getting-started/theming/ – AWhitford Dec 21 '19 at 09:46
Maybe the third step, but the first two are valid for making sure the end-user gets the required font if it's not available on their system. – Asamoah May 23 '20 at 15:04
Can you explain the 400,300,700 appended after Oswald? – Digin Dominic May 18 '22 at 09:20
2

@DiginDominic Those are [font weights](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight). It's best to include only the weights plan to use. – tdy Feb 07 '23 at 04:10

score 96 · Answer 2 · edited Jun 13 '19 at 21:20

If you use Sass, there are Bootstrap variables are defined with !default, among which you'll find font families. You can just set the variables in your own .scss file before including the Bootstrap Sass file and !default will not overwrite yours. Here's a good explanation of how !default works: https://thoughtbot.com/blog/sass-default.

Here's an untested example using Bootstrap 4, npm, Gulp, gulp-sass and gulp-cssmin to give you an idea how you could hook this up together.

package.json

{
  "devDependencies": {
    "bootstrap": "4.0.0-alpha.6",
    "gulp": "3.9.1",
    "gulp-sass": "3.1.0",
    "gulp-cssmin": "0.2.0"
  }
}

mysite.scss

@import "./myvariables";

// Bootstrap
@import "bootstrap/scss/variables";
// ... need to include other bootstrap files here.  Check node_modules\bootstrap\scss\bootstrap.scss for a list

_myvariables.scss

// For a list of Bootstrap variables you can override, look at node_modules\bootstrap\scss\_variables.scss

// These are the defaults, but you can override any values
$font-family-sans-serif: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !default;
$font-family-serif:      Georgia, "Times New Roman", Times, serif !default;
$font-family-monospace:  Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
$font-family-base:       $font-family-sans-serif !default;

gulpfile.js

var gulp = require("gulp"),
    sass = require("gulp-sass"),
    cssmin = require("gulp-cssmin");

gulp.task("transpile:sass", function() {
    return gulp.src("./mysite.scss")
        .pipe(sass({ includePaths: "./node_modules" }).on("error", sass.logError))
        .pipe(cssmin())
        .pipe(gulp.dest("./css/"));
});

index.html

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="mysite.css" />
    </head>
    <body>
        ...
    </body>
</html>

This should be the accepted answer. Bootstrap has built this functionality in precisely so that you you don't have to hack their code and then lose all your updates when you upgrade in a few years time. Anyone reading this, ignore the answers that say to edit the source code! — DoubleA, Jul 11 '17 at 15:08
@DoubleA: It's been a few years and I've learned some things along the way. You inspired me to expand on my answer so hopefully it's more useful now. — Nelson Rothermel, Jul 13 '17 at 03:42

score 34 · Answer 3 · answered Jun 06 '14 at 06:08

34

I think the best and cleanest way would be to get a custom download of bootstrap.

http://getbootstrap.com/customize/

You can then change the font-defaults in the Typography (in that link). This then gives you a .Less file that you can make further changes to defaults with later.

answered Jun 06 '14 at 06:08

punkologist

721
5
14

6

Can whoever -1'd me tell me why this is not a valid solution? – punkologist Jun 09 '14 at 21:58
As +punkologist noted, this is the correct and supported solution to customizing Bootstrap. Please read the documentation and following the provided link. – Jan Nielsen Jan 26 '15 at 02:45
And here's [a nice article on customizing Bootstrap](http://www.smashingmagazine.com/2013/03/12/customizing-bootstrap/). – Jan Nielsen Jan 26 '15 at 03:32
29

I would create an override css file rather that downloading a custom bootstrap... That way your bootstrap is easily up-gradable to future dev's. – RayLoveless Oct 30 '15 at 21:42
@RayLoveless can you explain how to do that not using `!important`? As if you need to double override the `!important` could cause some problems. – Ruan Carlos Jun 25 '18 at 18:28
2

You can set variables and then import bootstrap to override bootstraps defaults. e.g. `$primary: purple; $secondary: goldenrod; $danger: blue; @import "node_modules/bootstrap/scss/bootstrap";` – Mark May 08 '20 at 03:26

score 19 · Answer 4 · answered Jun 06 '14 at 06:06

19

If you have a custom.css file, in there, just do something like:

font-family: "Oswald", Helvetica, Arial, sans-serif!important;

answered Jun 06 '14 at 06:06

Ali Gajani

14,762
12
59
100

score 12 · Answer 5 · answered Feb 19 '22 at 07:00

Most of the answers on this page seem to suggest customising bootstrap variables.

However for Bootstrap 5 the preferred way to go seems to be to use the CSS variables. https://getbootstrap.com/docs/5.1/customize/css-variables/

e.g. body font-family is set in _reboot.scss to use the CSS variable bs-body-font-family which is set in _root.scss. So you can redefine this CSS variable :

body { --bs-body-font-family: 'YOUR GOOGLE FONT'; }

Carlos Peixoto · Answer 6 · 2022-04-08T19:25:41.357

9

Using bootstrap 5 SASS

Use the $font-family-base, $font-size-base, and $line-height-base attributes as our typographic base applied to the 'body'.

https://getbootstrap.com/docs/5.0/content/typography/

edited Apr 08 '22 at 19:25

answered Nov 16 '21 at 19:04

Carlos Peixoto

129
1
3

score 6 · Answer 7 · answered Jun 06 '14 at 06:12

6

Another way is to download source code then change following vaiables in variables.less

@font-family-sans-serif:  "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
//** Default monospace fonts for `<code>`, `<kbd>`, and `<pre>`.
@font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

And then compile it to .css file

answered Jun 06 '14 at 06:12

Nicolai

1,907
1
23
31

@gerdi, where is the problem? – Nicolai Jun 06 '14 at 07:14
1

the word source code. There is no need to overwrite bootstrap. Firstly no one has the exact same style as bootstrap so you are going to create a .css file that will overwrite certain values. That is were the font change should happen. Its not so problematic with css, but generally people who code in css move to javascript and this destruction of source is brought along with it. I am being pedantic, but good practice is good. – Jun 06 '14 at 07:22
1

@gerdi, I mean that if you override values of this variables the only change will be in front but not in the names of class that will influence to javascript – Nicolai Jun 06 '14 at 07:31
From what i can tell bootstrap and bootwatch are starting points to a development process. when you kick off development, most certainly in the case when you are working in a team one needs to consider SoC http://en.wikipedia.org/wiki/Separation_of_concerns. When one starts overwriting DL source code, the general direction is toward spaghetti code , where devs start fighting over the position of "thier" .css file in the head tag – Jun 06 '14 at 07:36
@gerdi, yeah it's true (SoC), but my answer was on question "How can I change the bootstrap default font family" - the main word in this case is "default". So my answer will not harm anything. And also consider that when you work in the team just commit one(variabless.less) file of 40 that are needed to complile whole bootsrap. - is it SoC? Yes. – Nicolai Jun 06 '14 at 07:45
True , i might be overthinking this. I just feel that if someone then overwrites the font on a custom.css file their will be confusion in long term – Jun 06 '14 at 07:50
1

Never edit the source code. You will lose all your changes when you come to upgrade in the future. This is the correct answer: https://stackoverflow.com/a/29952126/2287428 – DoubleA Jul 11 '17 at 15:10

score 4 · Answer 8 · answered Jun 14 '15 at 01:31

4

The bootstrap-live-customizer is a good resource for customising your own bootstrap theme and seeing the results live as you customise. Using this website its very easy to just edit the font and then download the updated .css file.

answered Jun 14 '15 at 01:31

Lewis James-Odwin

1,019
7
6

score 4 · Answer 9 · answered Sep 26 '19 at 09:45

I know this is a late answer but you could manually change the 7 font declarations in the latest version of Bootstrap:

html {
  font-family: sans-serif;
}

body {
  font-family: sans-serif;
}

pre, code, kbd, samp {
  font-family: monospace;
}

input, button, select, optgroup, textarea {
  font-family: inherit;
}

.tooltip {
  font-family: sans-serif;
}

.popover {
  font-family: sans-serif;
}

.text-monospace {
  font-family: monospace;
}

Good luck.

score 3 · Answer 10 · answered Nov 20 '20 at 08:46

I am using React Bootstrap, which is based on Bootstrap 4. The approach is to use Sass, simliar to Nelson Rothermel's answer above.

The idea is to override Bootstraps Sass variable for font family in your custom Sass file. If you are using Google Fonts, then make sure you import it at the top of your custom Sass file.

For example, my custom Sass file is called custom.sass with the following content:

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap');
   
$font-family-sans-serif: "Dancing Script", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;

I simply added the font I want to the front of the default values, which can be found in ..\node_modules\boostrap\dist\scss\_variables.scss.

How the custom.scss file is used is shown here, which is obtained from here, which is obtained from here...

Because the React app is created by the Create-React-App utility, there's no need to go through all the crufts like Gulp; I just saved the files and React will compile the Sass for me automagically behind the scene.

score 2 · Answer 11 · answered Dec 22 '19 at 22:26

If you want the font you chose to be applied and not the one in bootstrap without modifying the original bootstrap files you can rearrange the tags in your HTML documents so your CSS files that applies the font called after the bootstrap one. In this way since the browser reads the documents line after line first it will read the bootstrap files and apply it roles then it will read your file and override the roles in the bootstrap and replace it with the ones in your file.

score 1 · Answer 12 · answered Oct 22 '22 at 05:48

with Boot strap 5 here's how I solve the problem like this.

before : which was not working

import "bootstrap/scss/bootstrap.scss";
body {
  font-family: 'Galmuri7';
}

after : which is working properly

import "/src/assets/scss/main.scss";

then I created /src/assets/scss/main.scss file like below

@import "bootstrap/scss/bootstrap.scss";
@import url('https://cdn.jsdelivr.net/npm/galmuri@latest/dist/galmuri.css');

:root {
  --bs-body-font-family: "Galmuri7";
}

score 0 · Answer 13 · edited Feb 03 '20 at 08:26

This is the best and easy way to import font from google and
this is also a standard method to import font

Paste this code on your index page or on header

<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>

other method is to import on css like this:

@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);

on your Css file as this code

body {
  font-family: 'Oswald', sans-serif !important;
}

Note : The @import code line will be the first lines in your css file (style.css, etc.css). They can be used in any of the .css files and should always be the first line in these files. The following is an example:

Still bootstrap font family will override yours – Nandha Frost Aug 20 '20 at 12:43 — Nandha Frost, Aug 20 '20 at 12:43

score 0 · Answer 14 · answered Jun 14 '21 at 20:59

0

Simple and Easy Method:

If u are using google fonts. for ex:

Then make sure to add !important at the end of css font family.

Example:

font-family: 'Rubik', sans-serif !important;

answered Jun 14 '21 at 20:59

Skidee

563
5
8

1

Using !important is really discouraged. I think this solution will give you lot's of headaches in the future. – julianm Feb 01 '22 at 01:49

How can I change the Bootstrap default font family using font from Google?

14 Answers14

Linked