Webkit Font Issue for Subdomains

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.

Reason

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

[cc lang=”apache”]
// This will allow font embedding from all domains


Header set Access-Control-Allow-Origin “*”


[/cc]

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

Allow from Specific Domains

[cc lang=”apache”]
// Allow only specific domain for fonts


Access-Control-Allow-Origin: http://otherdomain.com


[/cc]

Conclusion

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.