Can't use Google's fonts properly

Question

So I've been trying to import Google's fonts and integrate them into a website without success.

The CSS:

@import url(http://fonts.googleapis.com/css?family=Linden+Hill);
/*...*/
body.single-post p, body.page p{
    font-family: 'Linden Hill', sans-serif;
}

For some reason, when I try to use the font, in both Firefox and Google Chrome, it doesn't load/show the font, with or without quotation marks wrapped around the font name.

Google Fonts's website says that to include the font, you do this:

font-family: 'Linden Hill', serif;

...but it doesn't work.

Now, for a different font, Tangerine (note that it's one word), it works if I include it without quotation marks, like so

@import url(http://fonts.googleapis.com/css?family=Tangerine);
/*...*/
body.single-post p, body.page p{
    font-family: Tangerine, sans-serif;
}

...but if you do what Google Fonts tells you, and wrap it in single quotes, it magically stops working.

This is what it looks like in the inspector:

Am I doing something wrong?

Answer 1

It turns out that I had the @import after a @font-face definition.

/*some other @imports*/
@font-face {/*font face here*/}
@import url(/*the font URL here*/)

Moving it before the @font-face definition fixes the issue.

Answer 2

That should work with double quote:

font-family: "Linden Hill", serif;

Answer 3

yes you are doing wrong in css here (body.single-post p, body.page p),

see here if you are using directly like this.

body{
    font-family: 'Linden Hill', sans-serif ;
}

you need to write css tree try this may it work

body .single-post p, body .page p{
    font-family: 'Linden Hill', sans-serif;
}

or if you can, show me the the code where you want to use it

its working fine the quotation make is not problem