@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

浏览器似乎阻止了对网络字体文件的请求，因为它们没有与 Access-Control-Allow-Origin header 集一起发送。查看 Chrome/Firefox 中开发人员工具中的控制台，您将看到错误：

Font from origin 'https://googledrive.com' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://hummingbirdgattodesign.blogspot.co.uk' is therefore not allowed access. The response had HTTP status code 502.

我建议您寻找其他位置来存放字体文件，因为我认为 Google Drive 不会为您设置此 header（例如：Access-Control-Allow-Origin error on Google Drive web site). You'd have more control over this kind of thing by serving from Amazon AWS, or the Google Cloud 平台.

@font-face 停止工作

@font-face stopped working

css

wordpress

fonts

blogger