CSS @font-face absolute URL from external domain: fonts not loading in firefox

Question

http://fwy.pagodabox.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

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

Solution 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

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>

Solution 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

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

Solution 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:

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

<?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.

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.

Comments

[camilo_u]

Follow this instructions in case you want want to implement the same solution on nginx: serverfault.com/questions/162429/…

[artfulrobot]

"You can’t use @font-face in Firefox with a font hosted on a different domain". Why do fonts served by Google Fonts work under firefox, then? Does that suggest there's a work around other than reconfigging the server?

[artfulrobot]

Oh, I geddit. Presumably Google have the Access-Control-Allow-Origin set up in their server... But then what's the point of Ffox disallowing foreign URLs if the foreign host can also override it. confused again!

[James]

That was exactly what I needed! Thanks so much!

[FrancescoMM]

@artfulrobot imagine all of the internets using the font on your server making you pay for resources and bandwidth.. [ √ ] blocked [ √ ] unless you want it

[FrancescoMM]

Not all other sites. Not necessarily. There is not only Access-Control-Allow-Origin: *, you can also Access-Control-Allow-Origin: myothersite.com