@font-face 停止工作

Question

不知道为什么，但@font-face 已停止在我的一些网站（Blogger 和 Wordpress）上工作。我之前使用 Google Drive 来托管字体如下：

@font-face {font-family: 'Biloxi';
src: url('https://googledrive.com/host/0Bybz--lLp5SvZmc0SGRGOVB4dEE/Biloxi Script-webfont.eot');
src: url('https://googledrive.com/host/0Bybz--lLp5SvZmc0SGRGOVB4dEE/Biloxi Script-webfont.eot') format('embedded-opentype'),
 url('https://googledrive.com/host/0Bybz--lLp5SvZmc0SGRGOVB4dEE/Biloxi Script-webfont.woff') format('woff'),
 url('https://googledrive.com/host/0Bybz--lLp5SvZmc0SGRGOVB4dEE/Biloxi Script-webfont.ttf') format('truetype'),
 url('https://googledrive.com/host/0Bybz--lLp5SvZmc0SGRGOVB4dEE/Biloxi Script-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;}

当它停止工作时，我尝试在我的服务器上托管字体并链接到如下文件中的字体，但即使这样也没有加载我觉得奇怪的字体。

@font-face {
font-family: 'Shorelines Script';
src: url('ShorelinesScriptBold.eot');
src: url('ShorelinesScriptBold.eot?#iefix') format('embedded-opentype'),
    url('ShorelinesScriptBold.woff') format('woff'),
    url('ShorelinesScriptBold.ttf') format('truetype');
font-weight: normal;
font-style: normal;

}

它似乎是零星的，所以字体会加载一分钟，但是你刷新它就不会加载（例如http://hummingbirdgattodesign.blogspot.co.uk/）。问题出现在 Blogger 和 Wordpress 上，似乎出现在 Chrome 和 Firefox 上。

作为一个相对缺乏经验的编码人员，非常感谢任何帮助！

Answer 1

浏览器似乎阻止了对 Web 字体文件的请求，因为它们没有通过 Access-Control-Allow-Origin 标头集发送。在 Chrome/Firefox 的开发者工具中查看控制台，您会看到错误：

来自“https://googledrive.com”的字体已被跨域资源共享策略阻止加载：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://hummingbirdgattodesign.blogspot.co.uk' 不允许访问。响应的 HTTP 状态代码为 502。

我建议您寻找一个替代位置来托管字体文件，因为我认为 Google Drive 不会为您设置此标头（例如：Access-Control-Allow-Origin error on Google Drive web site）。通过Amazon AWS 或Google Cloud 平台提供服务，您可以更好地控制此类事情。