CSS @ font-face来自外部域的绝对URL：fonts not loaded in firefox [英] CSS @font-face absolute URL from external domain: fonts not loading in firefox

问题描述

http://fwy.pagodabox.com

http://friends-with-you.myshopify.com/

我有我的字体和CSS托管在一个pagodabox.com服务器，并正在开发storeify的商店部分。我想使用相同的样式表从pagodabox托管网站的shopify网站。但我的字体没有加载到firefox版本13.0.1

I have my fonts and css hosted on a pagodabox.com server, and am developing the store section on shopify. I want to use the same stylesheet from the pagodabox hosted site for the shopify site. But my fonts aren't loading in firefox, version 13.0.1

有FF或者我的语法有问题吗？谢谢!!!

Is there an issue with FF or with my syntax? Thanks!!!

@font-face {
  font-family:'IcoMoon';
  src:url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/IcoMoon.eot');
  src:url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/IcoMoon.eot?#iefix') format('embedded-opentype'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/IcoMoon.svg#IcoMoon') format('svg'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/IcoMoon.woff') format('woff'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/IcoMoon.ttf') format('truetype');
  font-weight:normal;
  font-style:normal;
}

@font-face {
  font-family:'square';
  src:url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.eot');
  src:url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.eot?#iefix') format('embedded-opentype'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.woff') format('woff'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.ttf') format('truetype'), url('http://fwy.pagodabox.com/magic/themes/fwy/assets/fonts/SquareSerif-Light-webfont.svg#SquareSerifLightRegular') format('svg');
  font-weight:normal;
  font-style:normal;
}

推荐答案

font-face在Firefox中使用托管在不同域上的字体
如果要使用绝对URL或托管在其他域上的字体指定@ font-face的字体，则需要使用Access控制标题，特别是Access-Control-Allow-Origin标头设置为*或允许请求字体的域。这也适用于托管在不同子域上的字体。如果你正在使用Apache，你可以尝试把它放在你的.htaccess并重新启动服务器

You can’t use @font-face in Firefox with a font hosted on a different domain If you want to specify a font for @font-face using an absolute URL, or a font hosted on a different domain, it needs to be served with Access Control Headers, specifically the Access-Control-Allow-Origin header set to '*' or the domains allowed to request the font. This also applies to fonts hosted on a different sub-domain. If you are using Apache you can try to put this in your .htaccess and restart the server

AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
<FilesMatch "\.(ttf|otf|eot)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>

这篇关于CSS @ font-face来自外部域的绝对URL：fonts not loaded in firefox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！