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.