A Web Developer's Diary

Loading webfonts of Amazon CloudFront the right way

6/29/2012

21 Comments

 
When loading webfonts of Amazon's CDN Cloudfront, a problem arises in FF and IE9. The fonts are not rendered! This is because a header is missing and these browsers refuse to render them due to security reasons. The fix is really easy, add these lines to your .htaccess file:
 <FilesMatch "\.(ttf|otf|eot|woff|svg)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>
Then the next step is to invalidate the font files that are cached on the CDN (you can do this through the AWS control panel). Wait until CloudFront refreshes the files and voila, it will serve the webfonts with the Access-Control-Allow-Origin header set and FF and IE9 will render them normally!
21 Comments

    Author

    Blog about random challenges of a web developer.

    Archives

    April 2015
    May 2013
    January 2013
    July 2012
    June 2012

    Categories

    All
    Aws
    Cdn
    Code Igniter
    Css
    H2database
    Jamp
    Java
    Javascript
    Magento
    Maven
    Mysql
    Opencl
    Php
    Play-framework
    Quercus
    Scala
    Ubuntu

    RSS Feed

Powered by Create your own unique website with customizable templates.