[英]How to get fonts loading cross domain in Firefox
I'm using limelight CDN for static files. 我正在使用limelight CDN来处理静态文件。 I get the error in native firefox inspector:
我在本机firefox检查器中收到错误:
downloadable font: download failed (font-family: "nimbus-bold" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed source: http://cdn-store.example.com/fonts/nimbussanspot-bold-webfont.woff 可下载的字体:下载失败(字体家族:“ nimbus-bold”样式:常规权重:常规拉伸:常规src索引:1):错误的URI或不允许跨站点访问来源: http://cdn-store.example .COM /字体/ nimbussanspot粗体,webfont.woff
CSS: CSS:
@font-face {
font-family: 'nimbus-bold';
src: url('/fonts/nimbussanspot-bold-webfont.eot');
src: url('/fonts/nimbussanspot-bold-webfont.eot%3F%23iefix') format("embedded-opentype");
src: url('/fonts/nimbussanspot-bold-webfont.woff') format("woff");
src: url('/fonts/nimbussanspot-bold-webfont.ttf') format("truetype");
src: url('/fonts/nimbussanspot-bold-webfont.svg%23nimbus_sans_p_otbold') format("svg");
font-weight: normal;
font-style: normal;
}
I tried the following, but it did not help: 我尝试了以下操作,但没有帮助:
<FilesMatch "\.(ttf|otf|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
-bash-4.1$ curl -I http://cdn-store.example.com/fonts/nimbussanspot-bold-webfont.woff
HTTP/1.1 200 OK
Date: Thu, 13 Feb 2014 16:58:05 GMT
Server: Apache/2.2.15 (Oracle)
Last-Modified: Thu, 13 Feb 2014 15:45:31 GMT
Accept-Ranges: bytes
Vary: Accept-Encoding,User-Agent
Access-Control-Allow-Origin: *
Content-Type: text/plain
Content-Length: 24040
Connection: keep-alive
-bash-4.1$ curl -I http://store.example.com/fonts/nimbussanspot-bold-webfont.woff
HTTP/1.1 200 OK
Date: Thu, 13 Feb 2014 17:04:10 GMT
Server: Apache/2.2.15 (Oracle)
Last-Modified: Thu, 13 Feb 2014 15:45:31 GMT
ETag: "146124-5de8-4f24b944b4eff"
Accept-Ranges: bytes
Content-Length: 24040
Vary: Accept-Encoding,User-Agent
Access-Control-Allow-Origin: *
Connection: close
Content-Type: text/plain
EDIT: with 'AddType' directive I get the following results, however the fonts don't load 编辑:使用“ AddType”指令,我得到以下结果,但是字体不加载
$ curl -I http://store.example.com/fonts/nimbussanspot-bold-webfont.woff
HTTP/1.1 200 OK
Date: Fri, 14 Feb 2014 15:09:02 GMT
Server: Apache/2.2.15 (Oracle)
Last-Modified: Thu, 13 Feb 2014 15:45:31 GMT
ETag: "146124-5de8-4f24b944b4eff"
Accept-Ranges: bytes
Content-Length: 24040
Vary: Accept-Encoding,User-Agent
Access-Control-Allow-Origin: *
Connection: close
Content-Type: application/x-font-woff
$ curl -I http://cdn-store.example.com/fonts/nimbussanspot-bold-webfont.woff
HTTP/1.1 200 OK
Server: Apache/2.2.15 (Oracle)
Accept-Ranges: bytes
Vary: Accept-Encoding,User-Agent
Access-Control-Allow-Origin: *
Content-Type: application/x-font-woff
Age: 55
Date: Fri, 14 Feb 2014 15:08:59 GMT
Last-Modified: Thu, 13 Feb 2014 15:45:31 GMT
Content-Length: 24040
Connection: keep-alive
Your webfont files are served in text/plain
Content-Type instead of the proper one such as application/x-font-woff
. 您的webfont文件以
text/plain
Content-Type而不是诸如application/x-font-woff
之类的适当文件形式提供。
Try something like this in your apache config file see if it helps: 在您的apache配置文件中尝试类似的操作,看看是否有帮助:
<Location /webfont>
Header set Access-Control-Allow-Origin "*"
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-woff .woff
</Location>
On your server you will need to add: Access-Control-Allow-Origin
for fonts. 在您的服务器上,您将需要添加:字体的
Access-Control-Allow-Origin
。
At .htaccess
add: 在
.htaccess
添加:
<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.