Menu
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.
302
Example: How to add the Open Sans font in CSS The font will be downloaded and processed in parallel with your own stylesheet. Alternatively, you can use a CSS @import : @import url('https://fonts.googleapis.com/css?family=Open+Sans');
Importing Your Web Font After you extract the zip file you generated above (or if you already have a webfont), right click the Fonts group in Bootstrap Studio and choose Import Webfont . In the file browser, navigate to the webfont and select the css file in the folder.
Despite being visually indistinguishable from its older brother, Google told us today in a roundtable at Google I/O 2018 that Google Sans is actually the same font but optimized to work at different sizes. The original Product Sans was only intended for Google's official product logos.
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?
188
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
