<FilesMatch "\.(ttf|otf|eot|woff|svg)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
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: 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
1/14/2013 03:48:09 am
This "may" be the issue on my website as I use W3TC and Amazon Cloudfront. I've noticed the Rockwell Condensed Bold fonts don't seem to come down to users. It's in the CSS and such but it shows up on my browser as New Times Roman. Many web tests show that TTF file as a 404 error.
Reply
awebdeveloper
1/14/2013 01:54:05 pm
Hi Marc,
Reply
1/22/2013 12:08:59 am
For whatever reason, the fonts were missing from the W3TC folder. I kept seeing that in the error logs on my host. So I just uploaded them into that folder and the fonts appeared on the actual blog. Not sure how they didn't get there but the fix for me was to just upload them into the W3 Total Cache folder that the error logs said they were missing from when being called.
Reply
Brad
1/20/2013 04:44:48 am
Hey there, I know it's a long while since this post but I'd like to confirm that this does indeed work with Cloudfront and an external host (i.e. not S3). Thank you so much for this because I really didn't like the fact that I had to pull static fonts from my server especially in high traffic periods.
Reply
awebdeveloper
1/20/2013 12:53:31 pm
Hi Brad,
Reply
Brad
1/21/2013 01:10:04 pm
Oh ya, I got it to work. Not sure if I didn't come across clearly but I was just saying that the code in your post worked for me with an external host and Cloudfront. :D Just wanted to say thanks really.
awebdeveloper
1/22/2013 12:35:33 am
Thanks for the kind words!
jdigdog
9/30/2013 03:25:39 pm
The code seems to be standard when I enable W3TC.
Reply
awebdeveloper
10/9/2013 03:29:55 pm
Maybe it's an SSL error? If you are requesting the page by HTTPS but the fonts are requested by (unsecure) HTTP, then the fonts won't be loaded.
Reply
jdigdog
10/9/2013 03:46:50 pm
Wish it was :(
awebdeveloper
10/9/2013 03:51:27 pm
Another idea: did you enable the ACAO header before or after making the first request from Cloudfront? I'm thinking that Cloudfront might be caching your old headers, try emptying the Cloudfront cache or rename the file to find out. (p.s. is the file extension in lowercase?)
Reply
jdigdog
10/9/2013 04:14:06 pm
After enabling the ACAO. Have just run an invalidation.... Same issue.
jdigdog
10/9/2013 04:14:13 pm
After enabling the ACAO. Have just run an invalidation.... Same issue.
awebdeveloper
10/9/2013 05:35:17 pm
Can you verify the ACAO header is present by inspecting the headers returned by the server? This header should be present:
Reply
jdigdog
10/9/2013 05:54:37 pm
Accept-Ranges:bytes
awebdeveloper
10/9/2013 06:02:13 pm
Which browser and browser version are you using?
Reply
jdigdog
10/10/2013 08:14:08 am
Chrome Version 30.0.1599.69 m
awebdeveloper
10/10/2013 03:18:58 pm
Hmm, I'm running out of ideas. Was the header you posted from the webserver or from CloudFront? (In case you posted your webserver's, can you show me CloudFront's headers, too, please?)
Reply
jdigdog
10/10/2013 03:26:01 pm
Response is from the web server for the fonts. Its caching pretty much everything else.
awebdeveloper
10/10/2013 03:35:24 pm
Could you give the CloudFront headers for the WOFF font URL specifically?
Reply
Your comment will be posted after it is approved.
Leave a Reply. |
AuthorBlog about random challenges of a web developer. Archives
April 2015
Categories
All
|