Posts match “ font-awesome ” tag:

over 11 years ago

Font awesome & Firefox with CloundFront

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.

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 *;
   }
/opt/nginx/conf/nginx.conf 
   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)

.....