Categories

Cross Domain Fonts

Posted on: December 13, 2015 by Dimitar Ivanov

The Problem

Usually web browsers forbids cross-domain requests, due the same origin security policy. That's why using web-fonts from remote domain may cause an error in your browser.

<style type="text/css">
@font-face {
    font-family: 'OpenSans';
    src: url('https://test.zinoui.com/cross-domain-fonts/disabled/OpenSans.woff2') format('woff2');
}
html, body{
    font: normal 16px OpenSans, sans-serif;
}
</style>

If you ever see this error in your browser, you should know that cross-origin policy is applied.

Font from origin has been blocked

The Solution

To overcome cross-origin restrictions, the response from remote server must include the Access-Control-Allow-Origin header.

If you're using font services as Typekit and Google Fonts, or content delivery networks as BootstrapCDN, CdnJS and JsDelivr to load your prefered fonts you don't need to do anything, because the Access-Control-Allow-Origin header is already presented in their response.

Apache
To configure the Apache web server put the code below into the httpd.conf or .htaccess file.

  1. How to correct mime type headers on Apache
    AddType application/vnd.ms-fontobject    .eot
    AddType application/x-font-opentype      .otf
    AddType image/svg+xml                    .svg
    AddType application/x-font-ttf           .ttf
    AddType application/font-woff            .woff
    AddType application/font-woff2           .woff2
    
  2. How to enable cross-origin resource sharing (CORS) on Apache
    <IfModule mod_headers.c>
      <FilesMatch ".(eot|otf|svg|ttf|woff|woff2)$">
        Header set Access-Control-Allow-Origin "*"
      </FilesMatch>
    </IfModule>
    

nginx
To configure the NGINX web server put the code below into the /etc/nginx/nginx.conf or your custom /etc/nginx/conf.d/custom.conf file.

  1. How to correct mime type headers on nginx
    application/vnd.ms-fontobject    eot;
    application/x-font-opentype      otf;
    image/svg+xml                    svg;
    application/x-font-ttf           ttf;
    application/font-woff            woff;
    application/font-woff2           woff2;
    
  2. How to enable cross-origin resource sharing (CORS) on nginx
    location ~* .(eot|otf|svg|ttf|woff|woff2)$ {
        add_header Access-Control-Allow-Origin *;
    }
    

IIS
To configure the Microsoft IIS put the code below into the web.config system.webServer block.

  • How to enable cross-origin resource sharing (CORS) on IIS
    <system.webServer>
      <httpProtocol>
        <customHeaders>
          <add name="access-control-allow-origin" value="*" />
          <add name="access-control-allow-headers" value="content-type" />
        </customHeaders>
      </httpProtocol>
    </system.webServer>
    

PHP
Can't control the remote server? It's not a problem. Instead of using the font file directly into your styles (CSS) you can use a server script.

  • How to use a server script rather than a physical font file
    <style type="text/css">
    @font-face {
        font-family: 'OpenSans';
        src: url('path/to/fonts.php') format('woff2');
    }
    html, body{
        font: normal 16px OpenSans, sans-serif;
    }
    </style>
    
  • How to fix cross-domain @font-face issues with PHP
    <?php
    // fonts.php
    header("Access-Control-Allow-Origin: *");
    header("Content-Type: application/font-woff2");
    echo @file_get_contents("http://test.zinoui.com/cross-domain-fonts/disabled/OpenSans.woff2");
    ?>
    
Conclusion

After setting up your server configuration files properly, the above issue should disappear. Let's see how the cross-domain request and response should look like:

@font-face issue fixed

Make your website more secure by using the HTTP Headers for Wordpress, and never face a cross-origin issue again. Oh yes, it's FREE.
See also
References
Share this post

Have a question about cross-domain fonts, please drop a comment below. Thanks for reading! Share if you like.


4 Comments

Hristo
Thanks! You saved me a lot of head scratching!
Manuel
From google translator (get fonts from my page to translate) the problem continue...
robert
Can someone explain the security issue with allowing cross domain fonts? (i understand the security issue with cross domain javascript)
Mike Kormendy
@robert The CORS policy wasn't only developed to block attacks, but to also protect private and restricted content for licensing purposes.

Leave a comment

Captcha