Google font not working with bootstrap

Question

I'm trying to use Google Font on a page. In my html I used:

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'>

And in my CSS:

@import url('http://fonts.googleapis.com/css?family=Open+Sans');

Still whenI use "Open Sans" with the font-family attribute it stays on Arial.

body
{
    background-color: #F1F1F2;
    font-family: "Open Sans", Arial;
}

Do you have a live example or a fiddle ? I'm pretty sure bootstrap has some font property on all text element such as p, span etc. This is overriding your body font-family value. — franchez, Feb 10 '14 at 13:28
@franchez I guess it would make sense, however I applied user3217672 method and it seemed to work with no !important tag. — user2820, Feb 10 '14 at 13:52

score 11 · Accepted Answer · edited Jan 22 '16 at 10:11

11

Using google font on any webpage is very easy and you can load the fonts asynchronously.

If you don't use the direct code that Google font delivers and you simply load the following url:

http://fonts.googleapis.com/css?family=Open+Sans:400,600

You'd be represented the source code (CSS).

Now, copy and paste the displayed code in the CSS source of your website.

You can then use your selected google font(s) on your webpages using the following:

body
{
    background-color: #F1F1F2;
    font-family: 'Open Sans', Arial;
}

That's enough and it will work.

edited Jan 22 '16 at 10:11

Knak

answered Feb 10 '14 at 13:38

Ahmed Wild

Thanks, that seems cleaner that embedding indeed. – user2820 Feb 10 '14 at 13:42

score 3 · Answer 2 · answered Feb 13 '15 at 20:35

3

I have a hunch that your bootstrap is being loaded after the CSS for your Google font. Find the point that you are importing this CSS:

@import "bootstrap-sprockets"; @import "bootstrap";

Then add your Google code AFTER that to make sure that it is not being overwritten by the bootstrap.

Good Luck!

answered Feb 13 '15 at 20:35

DrewC

1

I was running into the exact same problem, but was not finding out where the solution was. Here this was the problem all along. Thank you so much for pointing this out, I don't think I would have figured this part out. – kdweber89 Jan 29 '17 at 23:41

score 2 · Answer 3 · answered Feb 10 '14 at 13:29

First of all, you dont need to do it twice! any one kind of FONT ASSOCIATION is enough !!

Warning that overuse of @import may cause a overhead!

Bootstrap(if you have used it) usually overrides the font with -> font-family:"Helvetica Neue",Helvetica,Arial,sans-serif

Working Demo -> Click here

Note : I have added the font as external resources. It seems to be working properly !

score 0 · Answer 4 · answered Nov 30 '19 at 17:03

0

just do !important after the font style you want to use

answered Nov 30 '19 at 17:03

Salah Ben Bouzid

Can you include a working example of using `!important` with styles to your answer – Danoram Dec 01 '19 at 04:49

4 Answers4