How to set Bootstrap @font-family-base?

Question

Bootstrap docs say:

Use the @font-family-base, @font-size-base, and @line-height-base attributes as our typographic base.

Does this mean there is a CSS variable called @font-family-base?

How can I set this in CSS to change the font for my whole page?

Solution 1

Visit the Bootstrap docs on customization - you can change several variables in Typography section, for instance @sansFontFamily, @serifFontFamily, @monoFontFamily, @baseFontSize, etc

Solution 2

For Bootstrap 3 open up your custom.css and

body,
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-family: "Ubuntu", Helvetica, Arial, sans-serif!important;
}

Solution 3

It's not a CSS variable, it's a LESS variable.

You can find (and edit) them in variables.less.

Comments

[cja]

There is no less directory in my Bootstrap download folder. (I got the latest version a few days ago.)

[amatellanes]

@cja Until RC2, the Bootstrap 3 customizer will be disabled. In the mean time, snag the compiled CSS and JavaScript. Hang tight!

[cja]

I noticed. Anyway, I have the compiled files on my computer. Surely I can change them to effect the font I want?

[cja]

Possibly because I have v3

[Simone]

That's because you have the compiled CSS files. You can download the LESS files and use them, or fiddle around with the compiled ones if you prefer

[Dave]

It sucks that this is the only way I could get it to work, but - it was - greatly appreciate it.

[subhaze]

Just to give some updated info on "CSS has no variables at all" CSS has a WIP spec for variables dev.w3.org/csswg/css-variables