Using a Different Font with Twitter Bootstrap

Adding a new font family to Twitter Bootstrap

Create a new CSS file. Call it custom.css. Link the CSS file inside your CSS tag as external CSS file. There add your @font-face code as in:

@font-face {
  font-family: 'OpenSans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url("//themes.googleusercontent.com/static/fonts/opensans/v6/u-WUoqrET9fUeobQW7jkRT8E0i7KZn-EPnyo3HZu7kw.woff") format('woff');
}

Your @font-face code seems to be missing some fonts/file. You can use Font Squirel to convert your font file and generate the corresponding CSS file. Use that block of CSS file.

And then use OpenSans in your font-family css.

I hope it helps

Does twitter bootstrap have any font-size utility classes?

There is no classes to change the font size but you can manage font size with strong and small tag but you cant change paragraph font size. You need to create custom CSS to do that.

Twitter Bootstrap - Use serif fonts

You have to change the LESS variable @baseFontFamily, it's default value is @sansFontFamily you juste have to set it to @serifFontFamily.

If you don't want to use LESS you can still change those variables in the Customize menu in the docs.

Bootstrap font overwrite with different fonts for heading and body

you can apply it to ur heading or whatever tags u want like this

h1, h2, h3, h4, h5, h6{
     font-family: 'Calibri', arial, sans-sarif; 
}

and for body if u want to apply open sans do it like this

body{
     font-family: 'open-sans', arial, sans-sarif; 
}

Google fonts and twitter bootstrap 3: where should I load the fonts, and how to use it in css file?

When working locally, use http:// instead of the protocol-less //
The Google font's aren't loading now...

<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=Lora%3A400%2C400italic%2C700%2C700italic%7CBitter%3A400&subset=latin%2Clatin-ext' type='text/css' media='all' />

Twitter Bootstrap and Font-Awesome: Some fonts appear as double (and more)

Customize Twitter Bootstrap here. Make sure to uncheck the default "Icons" under "Base CSS."

Because you haven't done this, both Glyphicons and Font Awesome icons are visible.

---

Related Topics