Using a different font with twitter bootstrap

Question

I want to use a different font for my website, which is not a regular webfont. I have created EOT files already. Now how can I integrate those fonts with twitter bootstrap ?

Answer 1

The easiest way I've seen is to use Google Fonts.

Go to Google Fonts and choose a font, then Google will give you a link to put in your HTML.

Then add this to your custom.css:

h1, h2, h3, h4, h5, h6 {
    font-family: 'Your Font' !important;
}
p, div {
    font-family: 'Your Font' !important;
}

or

body {
   font-family: 'Your Font' !important;
}

Answer 2

You can find a customizer on the official website, which allows you to set some LESS variables, as @font-family-base. Link your custom fonts in your layout, and use your custom generated bootstrap style.

Link here

For an example with the @font-face rule, using WOFF format (which is pretty good for browser compatibility), add this CSS in your app.css file and include your custom boostrap.css file.

@font-face {
  font-family: 'Proxima Nova';
  font-style:  normal;
  font-weight: 400;
  src: url(link-to-proxima-nova-font.woff) format('woff');
}

Please note Proxima Nova is under a license.

Answer 3

First of all you have to include your font in your website (or your CSS, to be more specific) using an appropriate @font-face rule.
From here on there are multiple ways to proceed. One thing I would not do is to edit the bootstrap.css directly - since once you get a newer version your changes will be lost. You do however have the possibility to customize your bootstrap files (there's a customize page on their website). Just enter the name of your font with all the fallback names into the corresponding typography textbox. Of course you will have to do this whenever you get a new or updated version of your bootstrap files.
Another chance you have is to overwrite the bootstrap rules within a different stylesheet. If you do this you just have to use selectors that are as specific as (or more specific than) the bootstrap selectors.
Side note: If you care about browser support a single EOT version of your font might not be sufficient. See http://caniuse.com/eot for a support table.

Answer 4

Hi you can create a customized build on bootstrap, just change the font name in the following pages

Bootstrap 2.3.2 http://getbootstrap.com/2.3.2/customize.html#variables

Bootstrap 3 http://getbootstrap.com/customize/#less-variables

After that, make sure to use proper @font-face in a css file and link that to your page. Or you could use font kit generators.

Answer 5

you can customize twitter bootstrap css file, open the bootstrap.css file on a text editor, and change the font-family with your font name and SAVE it.

OR got to http://getbootstrap.com/customize/ and make a customized twitter bootstrap