字体嵌入不起作用答案

【问题标题】：font embed not working字体嵌入不起作用
【发布时间】：2015-01-19 16:55:29
【问题描述】：

我正在尝试在我的网站上嵌入字体“gothamcondensed”，但它不起作用，我使用了 font-squirrel 中的@font-face。我只是在服务器上移动了我的字体并更改了网址，但它不起作用。

有什么建议吗？我真的需要一个建议。以下是我的代码：

    @font-face { 
    font-family: 'gothamcondensedbold';
    src: url('http://some-url.com/zts-fonts/gothamcondensed-bold_0-webfont.eot');
    src: url('http://nx3corp.com/zts-fonts/gothamcondensed-bold_0-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://nx3corp.com/zts-fonts/gothamcondensed-bold_0-webfont.woff2') format('woff2'),
         url('http://nx3corp.com/zts-fonts/gothamcondensed-bold_0-webfont.woff') format('woff'),
         url('http://nx3corp.com/zts-fonts/gothamcondensed-bold_0-webfont.ttf') format('truetype'),
         url('http://nx3corp.com/zts-fonts/gothamcondensed-bold_0-webfont.svg#gothamcondensedbold') format('svg');
    font-weight: normal;
    font-style: normal;

}    body {
    margin:0;
    padding:0;
    font-family: 'gothamcondensedbold';
}

【问题讨论】：

http://some-url.com 对于第一个 eot 是否正确？或者这只是一个示例占位符
您是否在控制台中遇到错误？类似No 'Access-Control-Allow-Origin'
是的，网址是正确的，我可以从 url 下载字体
是的，我在控制台中收到以下消息：来自源“some-url.com”的字体已被跨源资源共享策略阻止加载：没有“Access-Control-Allow-Origin”标头出现在请求的资源上。因此，不允许访问 Origin 'null'。
不要忘记标记为已解决，无论是自己标记还是从答案中标记（如果它有助于解决您的问题）。

标签： html css fonts embed

【解决方案1】：

问题似乎与跨域字体请求有关。您可能希望将其放入服务器上的 .htaccess 或 httpd.conf 文件中：

# Apache config
<FilesMatch ".(eot|ttf|otf|woff)">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

# nginx config
if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
    add_header Access-Control-Allow-Origin *;
}

更多信息请点击此处：http://davidwalsh.name/cdn-fonts

如果可以的话，当然也可以将字体上传到同一服务器！

【讨论】：

非常感谢大家，这实际上是跨源问题，我将字体上传到同一台服务器上，并且可以正常工作。 :) 谢谢 lee_gladding
哈哈...没有意识到这是您的选择，但很高兴我们找到了您问题的根源。