CSS @font-face绝对URL来自外部域:字体不载入firefox。

http://fwy.pagodabox.com

http://fwy.pagodabox.com

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

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

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

我将我的字体和css托管在一个pagodabox.com服务器上，并且正在开发shopify的商店部分。我希望为shopify站点使用来自pagodabox托管站点的相同样式表。但是我的字体没有加载到firefox中，版本是13.0.1。

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

FF和我的语法有问题吗?谢谢! ! !

@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;
}

5 个解决方案

#1

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

你不能使用在Firefox @font-face字体托管在一个不同的领域,如果你想为@font-face使用绝对URL指定字体,或字体托管在一个不同的领域,它需要访问控制头,特别是Access-Control-Allow-Origin标题设置为‘*’或域允许请求的字体。这也适用于驻留在不同子域上的字体。如果您正在使用Apache，可以尝试将其放入.htaccess并重新启动服务器

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>

#2

This is a known limitation and is actually a security measure to prevent abuse to other servers.

这是一个已知的限制，实际上是防止对其他服务器的滥用的安全措施。

If you have server-level control of the server the fonts are hosted on, you can tweak Apache to allow these kinds of connections. More info on that: http://www.cssbakery.com/2010/07/fixing-firefox-font-face-cross-domain_25.html

如果您对字体承载的服务器具有服务器级控制，您可以调整Apache以允许这些类型的连接。更多相关信息:http://www.cssbakery.com/2010/07/fixing-firefox-font-face-cross-domain_25.html

But know that if you do this, this would allow all other sites to use those fonts on their sites and use your bandwidth.

但是要知道，如果你这样做，这将允许所有其他网站在他们的网站上使用这些字体并使用你的带宽。

#3

If you have access to the remote server, you can add a local script to set the correct headers, like header('Access-Control-Allow-Origin: *'); and then dump the font file. For example, in PHP, like this:

如果您有访问远程服务器的权限，您可以添加一个本地脚本来设置正确的头部，比如header(' access - control - allow - origin: *');然后转储字体文件。例如，在PHP中，如下所示:

(file fnt.php in the same folder of the fonts)

(文件fnt。在相同的字体文件夹中的php)

<?php

    define('FONT_FOLDER','');

    $MIMES=array(
        '.eot'=>'application/vnd.ms-fontobject',
        '.ttf'=>'font/ttf',
        '.otf'=>'font/otf',
        '.woff'=>'font/x-woff',
        '.svg'=>'image/svg+xml',
    );


    $IKnowMime=MimeByExtension(GetExt($s));
    $f=preg_replace('/[^a-zA-Z.0-9-_]/','',$_REQUEST['f']);

/* 
    header("Cache-Control: private, max-age=10800, pre-check=10800");
    header("Pragma: private");
    header("Expires: " . date(DATE_RFC822,strtotime(" 2 day")));
*/    
    header('Content-type: '.$IKnowMime );
    header("Content-Transfer-Encoding: binary");
    header('Content-Length: '.filesize(FONT_FOLDER.$f));
    header('Content-Disposition: attachment; filename="'.$f.'";');

    header('Access-Control-Allow-Origin: *');

    readfile(FONT_FOLDER.$f);

    function GetExt($File) {
        $File=explode('.',$File);
        if(count($File)==1) return '';
        return '.'.$File[count($File)-1];
    }

    function MimeByExtension($ex) {
        global $MIMES;
        $ex=strtolower($ex);
        if(isset($MIMES[$ex])) return $MIMES[$ex];
        else return FALSE;
    }

?>

Then you can use the fonts like this:

然后你可以使用这样的字体:

<style type="text/css">
@font-face {
    font-family: 'default-font';
    src: url('http://www.website.com/fonts/ultra/fnt.php?f=arial.eot');
    src: url('http://www.website.com/fonts/ultra/fnt.php?f=arial.eot#iefix') format('embedded-opentype'),
         url('http://www.website.com/fonts/ultra/fnt.php?f=arial.woff') format('woff'),
         url('http://www.website.com/fonts/ultra/fnt.php?f=arial.ttf') format('truetype'),
         url('http://www.website.com/fonts/ultra/fnt.php?f=arial.svg#arial') format('svg');
}
</style>

specifying the php file instead of the font file, and passing the font file as an argument ?f=fontfile.woff. If you want to keep the FONT_FOLDER parameter to point to the correct folder. The preg_replace if for security, preventing access outside of the font folder.

指定php文件而不是字体文件，并将字体文件作为参数传递给?f=fontfile.woff。如果您想保持FONT_FOLDER参数指向正确的文件夹。为了安全起见，preg_replace将阻止对字体文件夹之外的访问。

You can also support some form of authentication to get sure only you are using those fonts.

您还可以支持某种形式的身份验证，以确保只使用这些字体。

You may also consider using some Access-Control-Allow-Origin other than '*' to specify exactly who can access your font files.

您还可以考虑使用除'*'之外的一些访问控制允许源来指定谁可以访问您的字体文件。

Access-Control-Allow-Origin: http://www.fromthisserverican.com

will allow access from server www.fromthisserverican.com, meaning that all pages on www.fromthisserverican.com may use the fonts, while pages on other servers may not.

将允许从服务器www.fromthisserverican.com访问，这意味着www.fromthisserverican.com上的所有页面都可以使用字体，而其他服务器上的页面可能不会。

#4

You can allow resources to be loaded from sub domain by adding following line to your .htaccess file

通过向.htaccess文件添加以下行，可以允许从子域加载资源

Load resources from sub-domain:

从子域加载的资源:

# Allow font, js and css to be loaded from subdomain
SetEnvIf Origin "http(s)?://(.+\.)?(example\.com)$" ORIGIN_DOMAIN=$0
<IfModule mod_headers.c>
    <FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff|js|png|jpg|jpeg|gif)$">
        Header set Access-Control-Allow-Origin %{ORIGIN_DOMAIN}e env=ORIGIN_DOMAIN
    </FilesMatch>
</IfModule>

Load resources from all other domains:

从所有其他域加载资源:

# Allow font, js, and css to be loaded from subdomain
<IfModule mod_headers.c>
    <FilesMatch "\.(eot|font.css|otf|ttc|ttf|woff|js|png|jpg|jpeg|gif)$">
        Header set Access-Control-Allow-Origin "*"
    </FilesMatch>
</IfModule>

Source: http://www.webspeaks.in/2015/01/wordpress-allow-cross-domain-resources.html

来源:http://www.webspeaks.in/2015/01/wordpress-allow-cross-domain-resources.html

#5

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>

This helped me to fix the issue.

这帮助我解决了问题。