0

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:

Mom, I broke the website!

Am I doing something wrong?

Ivan
  • 307
  • 1
  • 16
  • Is the @import before any style rules in the document? I know it is in your example here, but there's a whole load of styles before that in the inspector. – davidpauljunior Jan 16 '14 at 03:05
  • @davidpauljunior It's right after a few imports, [and a @font-face](http://i.imgur.com/4SKhEqY.png). I'll move it back further and see if it works. – Ivan Jan 16 '14 at 03:08
  • @davidpauljunior Argh, a rookie mistake. Yeah, moving the `@import` before the `@font-face` definition fixed it. Thanks. – Ivan Jan 16 '14 at 03:09
  • No problem. With the other example where Tangerine worked, I wondered if that font was on your machine already. – davidpauljunior Jan 16 '14 at 03:10
  • @davidpauljunior If you read the second half of the post, it shows that it essentially grabs it from Google Fonts as well. – Ivan Jan 16 '14 at 03:11
  • I know, but as it wasn't working I wondered if the import was a red herring (wasn't actually working) but the font was showing when you didn't use quotation marks because it was on the machine. Just a thought – davidpauljunior Jan 16 '14 at 03:13
  • @davidpauljunior Hmm, I do believe this computer has the font installed, maybe you're right. I'll take a look into it. – Ivan Jan 16 '14 at 03:15

3 Answers3

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.

Ivan
  • 307
  • 1
  • 16
0

That should work with double quote:

font-family: "Linden Hill", serif;

Core972
  • 4,065
  • 3
  • 31
  • 45
  • The issue is that, it doesn't. I tried all sorts of quotes, and all variations of it. Nothing works. – Ivan Jan 16 '14 at 02:57
0

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

fahd4007
  • 544
  • 4
  • 14