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;
}

Answer 1

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.

Answer 2

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!