css - 使用@ font-face的Webfont停止工作

我实际上无法在Chrome或Firefox（我的用户使用的两个主要浏览器）上工作。
我尝试了几种不同的方法，但是没有一种使它再次起作用。有谁知道会发生什么事吗？

我的网站是http://goronah.blog.br/

CSS的链接是：http://www.goronah.blog.br/wp-content/themes/goronahresponsive/style.css

@ font-face是：

@font-face{
    font-family:Bebas Neue;
    src: url('BebasNeue.otf');
    font-style:normal;
    font-weight:normal;
}

和一个常见的用途：

h2 {
    font-size:2.4em;
    font-family:"Bebas Neue";
    font-weight:normal;
}

最佳答案

Chrome DevTools显示有关字体的以下错误：


  来源“ http://www.goronah.blog.br”的字体已被阻止
  通过跨域资源共享策略加载：否
  请求中存在“ Access-Control-Allow-Origin”标头
  资源。因此，不允许来源'http://goronah.blog.br'
  访问。


基本上出于安全原因，浏览器不会下载字体，因为它来自站点（www.goronah.blog.br）以外的另一个（子）域。我注意到前者只是重定向到后者，所以我假设它只是一个别名，所有内容都可以从两个URL获得。

解决此问题的最简单方法是从样式表的链接中删除goronah.blog.br部分。

<link rel="stylesheet" type="text/css" href="http://www.goronah.blog.br/wp-content/themes/goronahresponsive/style.css" />

进入

<link rel="stylesheet" type="text/css" href="http://goronah.blog.br/wp-content/themes/goronahresponsive/style.css" />

关于css - 使用@ font-face的Webfont停止工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/27444662/