Rendering open sans google web fonts with bootstrap?

Question

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.

Viewer

Why don't you just customize Bootstrap? – Parotic

Answer 1

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?

Floria

just insert 'Open Sans' in the box @sansFontFamily on the customize page before downloading it, and don't forget to include the link from google webfonts api in the head of your document – Footed

I'm using bootstrap from the bootstrap CDN. I'll try this method though. I just don't understand why the overriding inherited font styles seems so difficult. – Viewer

Did this work for you? Have you considered accepting an answer as correct? This will help others in future with similar problems. Thanks. – Floria

Answer 2

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
}

Rosenstein

!important didn't have any effect on the rendered output. – Viewer