Firefox中未显示字体

Question

我正在使用@font-face - 按照建议使用.eot，.woff，.ttf和.svg。它通常看起来除了在Firefox中，它没有被使用并且回退到Helvetica / sans-serif。

正常：

火狐：

CSS：

@font-face {
    font-weight: 900;
    font-style: normal;
    font-family: 'Lato';
    src: url('http://static.tumblr.com/cv6ot7o/LREnbhzla/lato-thin.eot');
    src: url('http://static.tumblr.com/cv6ot7o/LREnbhzla/lato-thin.eot?#iefix') format('eot'), url('http://static.tumblr.com/cv6ot7o/iQinbhzmp/lato-thin.woff') format('woff'), url('http://static.tumblr.com/cv6ot7o/Lxynbhzok/lato-thin.ttf') format('truetype'), url('http://static.tumblr.com/cv6ot7o/p2Anbj1jl/lato-thin.svg') format('svg');
}

h1 { 
    font-family: "Lato", "HelveticaNeue-UltraLight", "Helvetica Neue UltraLight", sans-serif;
    font-size: 4em;
     }

HTML：

<h1>title</h1>

JSFiddle

我们如何解决这个问题？

我看到一些类似的问题建议使用字体的本地链接，但我不能在这里使用它。

Answer 1

如果您查看Firefox中的控制台日志，它的条目如下：

可下载字体：下载失败（font-family：“Lato”样式：正常权重：900拉伸：正常src索引：1）：不允许错误的URI或跨站点访问 来源：http://static.tumblr.com/cv6ot7o/iQinbhzmp/lato-thin.woff

显然网站想要禁止远程使用他们的字体。

请考虑使用Lato at Google fonts。

独立于此，将Lato Thin声明为具有权重900是非常不合逻辑的。它被声明为具有权重100.您应该使用<link href='http://fonts.googleapis.com/css?family=Lato:100' rel='stylesheet'>和h1 { font-family: Lato; font-weight: 100 }。