托管图标字体本地中断iconfont API调用

Question

所以我一直在使用WeLoveIconFonts应用程序接口调用来@导入他们托管的Entypo图标字体版本，但是他们最近有一些停机时间，如果我们可以自己托管这些文件，我会感觉更舒服。

我下载了从这段CSS调用的文件

@import url(http://weloveiconfonts.com/api/?family=entypo);

将其保存为CSS文件并将其重新上传到我们自己的服务器

新的@import url现在是

@import url('http://myserver.com/entypo.css');

在这个文件中是对各个字体文件的调用(URL如下所示)

@charset 'UTF-8';
@font-face {
font-family: 'entypo';
font-style: 'normal';
font-weight: 'normal';
src: url('http://weloveiconfonts.com/api/fonts/entypo/entypo.eot');
src: url('http://weloveiconfonts.com/api/fonts/entypo/entypo.eot?#iefix') format('eot'), 
url('http://weloveiconfonts.com/api/fonts/entypo/entypo.woff') format('woff'), 
url('http://weloveiconfonts.com/api/fonts/entypo/entypo.ttf') format('truetype'), 
url('http://weloveiconfonts.com/api/fonts/entypo/entypo.svg#entypo') format('svg');
}

我也下载并重新上传到我的服务器上，并相应地更正了路径，即

src: url('http://weloveiconfonts.com/api/fonts/entypo/entypo.eot');

变成了

src: url('http://myserver.com/fonts/entypo/entypo.eot');

一切似乎都很好地从网络标签(状态是'200 OK')，包括所有的字体和新的样式表，但是字体似乎没有被设置在所需的项目上，它只是在默认字体的跨度(Proxima Nova)的样式，并显示小字符内的方框。当我签入firebug时

font-family: 'entypo';

将呈灰色显示，而显示proxima。

有谁知道我哪里出问题了吗？我怀疑原来的@import文件并不是作为CSS来调用的，但是它下载的文件的内容是CSS规则。

任何帮助都将不胜感激。

Answer 1

如果你想自己托管Entypo，你从http://www.entypo.com/下载必要的文件可能会有更好的结果，而不是试图从托管服务中逐个提取它们。

字体自己的网站上的下载包将为您提供所需的文件，并且已经为在本地托管字体设置了CSS。

Answer 2

如果这只在Firefox下发生，那么您没有正确设置"Allowed Origin“头，Firefox会阻止它: Access-Control-Allow-Origin。

http://red-team-design.com/firefox-doesnt-allow-cross-domain-fonts-by-default/

也可能是MIME类型设置不正确。

http://somethinginteractive.com/blog/2012/06/04/proper-mime-types-for-embedded-font-face-fonts/