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

html css twitter-bootstrap fonts

292,470

Solution 1

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;
}

Solution 2

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>

Solution 3

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.

Solution 4

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

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

Solution 5

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

View more solutions

292,470

user3651129

Updated on April 09, 2022

Comments

user3651129 about 2 years
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?
Nicolai almost 10 years

@gerdi, where is the problem?
Admin almost 10 years

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.
Nicolai almost 10 years

@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
Admin almost 10 years

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 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
Nicolai almost 10 years

@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.
Admin almost 10 years

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
punkologist almost 10 years

Can whoever -1'd me tell me why this is not a valid solution?
Jan Nielsen about 9 years

As +punkologist noted, this is the correct and supported solution to customizing Bootstrap. Please read the documentation and following the provided link.
Jan Nielsen about 9 years

And here's a nice article on customizing Bootstrap.
RayLoveless over 8 years

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.
DoubleA almost 7 years

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 almost 7 years

Never edit the source code. You will lose all your changes when you come to upgrade in the future. This is the correct answer: stackoverflow.com/a/29952126/2287428
Nelson Rothermel almost 7 years

@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.
Ruan Carlos almost 6 years

@RayLoveless can you explain how to do that not using !important? As if you need to double override the !important could cause some problems.
AWhitford over 4 years

This approach neglects the sophisticated theming approach used by Bootstrap 4: getbootstrap.com/docs/4.4/getting-started/theming
Mark almost 4 years

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";
Asamoah almost 4 years

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.
Nandha Frost over 3 years

Still bootstrap font family will override yours
alfonso over 3 years

Thank you. It was very important!
julianm about 2 years

Using !important is really discouraged. I think this solution will give you lot's of headaches in the future.
Digin Dominic almost 2 years

Can you explain the 400,300,700 appended after Oswald?