css - 无法正确使用谷歌字体

Question

所以我一直在尝试导入 Google 的字体并将它们集成到网站中，但没有成功。

CSS:

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

出于某种原因，当我尝试在 Firefox 和 Google Chrome 中使用该字体时，它不会加载/显示字体，无论字体名称是否带有引号。

Google Fonts 的网站说要包含字体，您可以这样做:

font-family: 'Linden Hill', serif;

...但它不起作用。

现在，对于另一种字体 Tangerine(请注意它是一个词)，如果我在不使用引号的情况下包含它，它就可以工作，就像这样

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

...但是如果您按照 Google Fonts 的指示进行操作，并将其用单引号括起来，它就会神奇地停止工作。

这是检查器中的样子:

我做错了什么吗？

Answer 1

事实证明我在@font-face 定义之后有@import。

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

将它移到 @font-face 定义之前可以解决问题。