Rendering open Google web fonts without bootstrap?

Question

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

I download fonts using

I have site-specific.css that loads after loading. I tried:

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

and:

 .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 which selector class I use, fonts are not displayed, and bootstrap fonts are inherited. I am not sure how to debug this.

Answer 1

If you did not modify the main Bootstrap files, I would simplify this for myself and use their "configure" function. Reboot it after placing the font names and replace the existing boot files with new ones.

You can configure it here:

http://getbootstrap.com/customize/

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

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 }