Yesterday, we changed Logdown's assets host from local to Cloundfront. One day later, many firefox users complained about the icons are broken.
We found out the reason is: Firefox doesn’t allow cross-domain fonts
Catalin Rosu nicely explains the situation and the reason behind it here:
http://www.red-team-design.com/firefox-doesnt-allow-cross-domain-fonts-by-default
And there were also some discussions on font-awesome-sass-rails issue tracker.
- https://github.com/littlebtc/font-awesome-sass-rails/issues/30
- https://github.com/bokmann/font-awesome-rails/pull/27
The fix:
Modify Nginx Config
Add these three lines to /opt/nginx/conf/nginx.conf
if ($request_filename ~* ^.*?\.(eot)|(ttf)|(woff)|(svg)|(otf)$){
add_header Access-Control-Allow-Origin *;
}
server {
.....
location ~* ^/assets/ {
expires 1y;
add_header Cache-Control public;
if ($request_filename ~* ^.*?\.(eot)|(ttf)|(woff)|(svg)|(otf)$){
add_header Access-Control-Allow-Origin *;
}
break;
}
.....
}
Go to Cloudfront panel to purge old content
You can find out assets path from ~/project_name/current/public/assets, by typing ls -al fontawesome-webfont-*.*
fontawesome-webfont-009f6d1f667cc42c25e712ab3429cbc7.eot
fontawesome-webfont-b4d67f1e5651506c3e80d842ee67d6ba.woff
fontawesome-webfont-f1c2889911d212e1403b68eabc1a3a56.svg
fontawesome-webfont-fb7a72c810ec644f3c26dcca68638308.ttf
Go to CloudFront Panel, create a invalidation
paste
assets/fontawesome-webfont-009f6d1f667cc42c25e712ab3429cbc7.eot
assets/fontawesome-webfont-b4d67f1e5651506c3e80d842ee67d6ba.woff
assets/fontawesome-webfont-f1c2889911d212e1403b68eabc1a3a56.svg
assets/fontawesome-webfont-fb7a72c810ec644f3c26dcca68638308.ttf
Invalidate!!
Wait about 5 minutes or longer...
It takes time to invalid CDN cache, just be patient..
By typing curl -I "https://d1vzm1nztjpyu4.cloudfront.net/assets/fontawesome-webfont-009f6d1f667cc42c25e712ab3429cbc7.eot" -s, you can checkout the status.
Once the response shows Access-Control-Allow-Origin: *, it is done :)
HTTP/1.0 200 OK
Content-Type: application/octet-stream
Content-Length: 37405
Connection: keep-alive
Server: nginx/1.4.1
......
Cache-Control: max-age=31536000
Access-Control-Allow-Origin: *
Accept-Ranges: bytes
Age: 277
Via: 1.0 96d42faebb6637ed78ff5050f67e2560.cloudfront.net (CloudFront)
.....