I want to cache all files as they don't change but not cache the main index.html page. My current htaccess:
<FilesMatch "\.(png|ttf|js|css|ico|mp3)$">
Header set Cache-Control "max-age=86400, public"
</FilesMatch>
On some browsers like IOS Safari the index.html updates automatically and doesn't need refreshing but with Google Chrome I need to refresh the page to see the updated page.
After researching I'm assuming I need no-store, max-age=0. Would it be more efficient to use no-cache to check for modification?
I've tried this mashup, do you see any problems:
<FilesMatch "\.(png|ttf|js|css|ico|mp3)$">
Header set Cache-Control "max-age=86400, public"
</FilesMatch>
<Files index.html>
Header set Cache-Control "no-store, max-age=0"
</Files>
I have my main site (website.com) and a sub domain (fancy.website.com), however I am getting
Access to font at 'social icons souce' from origin 'fancy.website.com'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin'
header is present on the requested resource.
I made sure that both of the sites are using HTTPS, and my htaccess looks like this:
Header set Access-Control-Allow-Origin *.website.com
<FilesMatch "\.(eot|ttf|otf|woff)">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
here is what it looks like on my website.com icons showing up and on fancy.website.com broken icons
I've cleared my caches, and the social icons the sub domain is trying to get show up on the main website. What can I do next to get them to show up?
In .htaccess i have added a "Header set Cache-control" rule and is working fine (most of it) but in iOS this is not working due to the caching in iOS i think. Is there a solution to force refresh the new pdf files?
<IfModule mod_headers.c>
<FilesMatch ".(pdf)$">
Header set Cache-Control "max-age=0, public, must-revalidate"
</FilesMatch>
</IfModule>
I am using Font-awesome for a webpage, and it works fine in Chrome and Safari, but not in Firefox. Instead of class="fa-star", I get little rectangles.
I did a research and found that I have to put
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
at the top of .htaccess file. It still doesn't work.
How can I solve this?
please read all of this before commenting.
I'm currently working on a large website which is hosted on Amazon Web Services (AWS). This allows us to use scalability features in situations where the website might take a big traffic load.
Originally we started by separating out the code of the website a mix of HTML/PHP/Java etc and have static assets on a separate server. When I first tried using font-face in this setup I found that Firefox and IE would not load the font, and quickly discovered it was a cross-domain issue. There are a variety of solutions to this, which include modifying headers to allow access to the font files. However, the storage system we're using doesn't allow for this type of header modification.
In a bid to see if I could just get the fonts to work across all browsers I moved them and the CSS file that calls them to the same domain as the website. However they still don't seem to load up in Firefox or IE. If I copy the code and run it locally in my documents everything seems fine in all browsers (so the files cannot be corrupt). Firefox is definitely finding the files as I can see them being loaded via FireBug.
I've checked all URLs to make sure they're correct and resolve where they should.
Here's the font-face CSS I'm using with the smiley hack:
#font-face {
font-family : "AllerRegular";
src : url('aller_rg-webfont.eot');
src : local('☺'),
url('aller_rg-webfont.woff') format('woff'),
url('aller_rg-webfont.ttf') format('truetype'),
url('aller_rg-webfont.svg#webfontooYDBZYS') format('svg');
font-weight : normal;
font-style : normal;
}
The CSS file sits in the same directory as the fonts.
I also have the MIME types set in a .htaccess file which sits in the same folder as the fonts.
AddType application/vnd.ms-fontobject .eot
AddType font/truetype .ttf
AddType font/opentype .otf
AddType font/opentype .woff
AddType image/svg+xml .svg .svgz
AddEncoding gzip .svgz
<FilesMatch "\.(ttf|otf|eot|woff|svg)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
If you have any ideas please suggest. I've been searching the web for a few days now but all solutions have failed me.
Currently, serving webfonts from AWS likely won't work in Firefox and IE 9+ because AWS doesn't support the Access-Control-Origin-Header. See this post on the AWS forums. Seems to be a problem for a lot of people.
Update 7/17/12:
As an alternative to AWS, Google's cloud services support cross-origin file serving. I just set up a bucket to serve webfonts, and it seems to be working. See this blog post and the documentation for more info.
Try do this:
On your server you will need to add:
Access-Control-Allow-Origin
To the header of the font files, so for example if you are using Apache you can add this to the .htaccess:
<FilesMatch "\.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
</FilesMatch>
My problem solved with this method.
This is possible using S3 without Cloudfront by adding the following CORS configuration.
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Content-*</AllowedHeader>
<AllowedHeader>Host</AllowedHeader>
</CORSRule>
</CORSConfiguration>
http://docs.aws.amazon.com/AmazonS3/latest/dev/cors.html
http://html5hacks.com/blog/2012/11/18/configure-amazon-s3-for-cross-origin-resourse-sharing-to-host-a-web-font/
http://blog.blenderbox.com/2012/10/12/serving-font-face-fonts-to-firefox-from-an-s3-bucket/
You may well need to add support for the MIME types on the new hosting environment.
Take a look at:
http://www.jbarker.com/blog/2011/web-fonts-mime-types