为什么我的谷歌字体不通过@字体加载？

Question

我创建了字体面板并将其应用于身体：

​

@font-face {
     font-family: 'Nosifer';
      src: url('https://fonts.googleapis.com/css?family=Nosifer');  
  }
 body { font-family: 'Nosifer' }

<body>
  This is text.
</body>

​

但是，Nosifer字体不可见。我做错了什么？

小提琴网址：http://jsfiddle.net/9mr7973y/

Answer 1

Chrome在控制台中发出以下警告：

无法解码下载的字体：https://fonts.googleapis.com/css?family=Nosifer OTS解析错误:无效版本标记

谷歌字体实现指南对于这种字体没有使用@font-face的特性。如果您想通过CSS导入它，他们建议使用@import：

@import url('https://fonts.googleapis.com/css?family=Nosifer');

Answer 2

将此添加到html头中。

<link href="https://fonts.googleapis.com/css?family=Nosifer" rel="stylesheet">

并应用类似的字体

font-family: 'Nosifer', cursive;