无法正确使用Google的字体

时间:2014-01-16 02:49:51

标签: css fonts webfonts google-font-api

所以我一直试图导入谷歌的字体并将它们整合到一个网站中而没有成功。

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

...但是如果你按照谷歌字体告诉你的方式,并用单引号将其包裹起来,它就会神奇地停止工作。

这就是检查员的样子:

Mom, I broke the website!

我做错了吗?

3 个答案:

答案 0 :(得分:1)

事实证明,我在@ font-face定义之后得到了@import。

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

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

答案 1 :(得分:0)

这应该与双引号一起使用:

  

font-family:“Linden Hill”,serif;

答案 2 :(得分:0)

是的,你在css这里做错了(body.single-post p,body.page p),

如果你这样直接使用,请看这里。

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

你需要写css树 试试这可能有用

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

或者如果可以,请告诉我您要使用它的代码

它的工作正常报价制作没问题