Webkit Font Issue for Subdomains

  • Avinash
  • 2
  • Mar 08, 2012
  • Web Development

Recently I have upgraded my blog theme, here you can see that I have used different webkit fonts in this. I had a problem when I have moved this theme to live site. Everything was working fine in local environment.

But on live site these webkit fonts are not loading at all. This problem was for Mozilla and Internet Explorere only. For other browsers everything was working fine.

After a few minutes of quick search I found the solution for this. The problem is that webkit fonts has issue in loading the fonts from other domains and my CSS files are loading from subdomain.

Here (Earlier) fonts are searving from the subdomain which is static.xpertdeveloper.com, which was creating problem and fonts were not loading on Mozilla and Internet Explorer.


As I have mentioned that, I have done a quick search for this and found the solution for the same. So now to make your fonts loading from subdomain also you need to make some twicks in your htaccess file.

This is because Firefox thinks that cross domain fonts embedding is an bad idea. We need to place below code in htaccess file to allow font embedding from different domains.

Allow from All Domains

// This will allow font embedding from all domains Header set Access-Control-Allow-Origin "*"
  // This will allow font embedding from all domains
  <FilesMatch "\.(ttf|ttc|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "*"

Firefox thinks that cross domain fonts embedding is an bad idea.

Allow from Specific Domains

// Allow only specific domain for fonts Access-Control-Allow-Origin: http://otherdomain.com
  // Allow only specific domain for fonts
  <FilesMatch "\.(ttf|ttc|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Access-Control-Allow-Origin: http://otherdomain.com


So here I have learned new thing which I thought good to share with all the developers. So after following this article you will not have any more problem with loading/embedding fomts from different domains.

Related Posts

Written by Avinash

Avinash Zala is leading various projects which deals with the various technology involved with the web. A combination of perfect technical and management skills. Avinash would like to chat with you and convert your imagination into the working system. You can get in touch with him on Facebook and Twitter.

View all posts by:

  • Rob Rasmussen

    Thanks for this article!
    I tried implementing it but I keep getting an internal server error. Any ideas why?

    • http://www.xpertdeveloper.com Avinash

      There must be something wrong on htaccess file..