CODEWITHSUNDEEP
csstwitter-bootstrapgoogle-webfonts
David Watson
David Watson

Reputation: 3432

Rendering open sans google web fonts with bootstrap?

I'm trying to use google web fonts open sans with bootstrap.

I'm loading the fonts with:

I have a site-specific.css that loads after bootstrap. I've tried:

.body { font-family: 'Open Sans', sans-serif;}

and also:

.bootstrap-container *,    
.bootstrap-container body, 
.bootstrap-container td, 
.bootstrap-container tr, 
.bootstrap-container div, 
.bootstrap-container p, 
.bootstrap-container form, 
.bootstrap-container input, 
.bootstrap-container select, 
.bootstrap-container textarea, 
.bootstrap-container font {
font-family: 'Open Sans', sans-serif;
}

But it seems that no matter what class selector I use, the fonts don't render and the bootstrap fonts are inherited instead. I'm not sure how to debug this.

Upvotes: 9

Views: 16669

Answers (2)

Michael Giovanni Pumo
Michael Giovanni Pumo

Reputation: 14774

Provided you haven't altered the core files of Bootstrap, I would make this easier on yourself and use their "customise" feature. Re-download it after placing your font names in and replace your existing bootstrap files with the new ones.

You can customise it here:

http://getbootstrap.com/customize/

Doing this will at least ensure that you don't miss something...and please, avoid using !important as suggested above (unless you really need to). Hope that helps?

Upvotes: 9

Mr. Alien
Mr. Alien

Reputation: 157334

Use CSS !important

.bootstrap-container *,    
.bootstrap-container body, 
.bootstrap-container td, 
.bootstrap-container tr, 
.bootstrap-container div, 
.bootstrap-container p, 
.bootstrap-container form, 
.bootstrap-container input, 
.bootstrap-container select, 
.bootstrap-container textarea, 
.bootstrap-container font {
font-family: 'Open Sans', sans-serif !important; <-------- Here
}

Upvotes: 4

Related Questions