0

There are quite a few SO questions (1, 2, 3, etc.) that go over the same problem I am having (fonts are not displaying on FireFox due to CORS issue). I have tried all of the proposed solutions in the above questions as well as various blog posts that come up when Googling the issue.

In my specific case I am using Cloudfront on Heroku but I am not using S3 (my assets are pulled to the CDN on first request). I am also using site-wide SSL (and I'm not sure if this is what is causing my issues as all the other examples seem to be for http:// sites). Currently I am trying to use the font_assets gem but when I curl one of my font files (or even a jpg file) I am getting a 301 Moved Permanently instead of a 200.

 curl -i https://d2loy3ox2q4ikr.cloudfront.net/assets/fontawesome-webfont-9a3b8f90662fe9149f07a059f1a4c782.woff
 HTTP/1.1 301 Moved Permanently
 Content-Type: text/html
 Transfer-Encoding: chunked
 Connection: keep-alive
 Date: Wed, 09 Apr 2014 12:27:33 GMT
 Location: https://www.transdraft.com/assets/fontawesome-webfont-9a3b8f90662fe9149f07a059f1a4c782.woff
 Status: 301 Moved Permanently
 X-Cache: Miss from cloudfront
 Via: 1.1 1316c66c042cd4b103a533bbf48877a5.cloudfront.net (CloudFront)
 X-Amz-Cf-Id: NciaYbAYVS7OpY6ORzjeZMurd_cyBo-B1WfN1QZbSexbM2DoD0vWqg==

 curl -i https://d2loy3ox2q4ikr.cloudfront.net/assets/transdraft-hp-2-0fa26dc608ff6a3ea83a093dce8e6338.jpg
 HTTP/1.1 301 Moved Permanently
 Content-Type: text/html
 Transfer-Encoding: chunked
 Connection: keep-alive
 Date: Wed, 09 Apr 2014 12:28:47 GMT
 Location: https://www.transdraft.com/assets/transdraft-hp-2-0fa26dc608ff6a3ea83a093dce8e6338.jpg
 Status: 301 Moved Permanently
 X-Cache: Miss from cloudfront
 Via: 1.1 c8b893f88c46deef2c0f22aefa2d3ecc.cloudfront.net (CloudFront)
 X-Amz-Cf-Id: 897u3X7te5f167cZlJiBME1UlBp5NYtGrKm18D4FWOHlTEFMITYTLw==

Any idea what I might be doing wrong?

Community
  • 1
  • 1
diasks2
  • 2,033
  • 2
  • 36
  • 61

1 Answers1

0

I fixed this same issue by modifying my application.css.scss to use SCSS imports instead of requires.

From:

//= require font-awesome

To:

@import 'font-awesome';

This may not work for you if you're not using SCSS.

ymek
  • 73
  • 1
  • 6