Rails 4

[xjunior]

It doesn't seem like this works on Rails 4, does it?

[r3cha]

try test and say to us

[sanyam-j]

yeah its not working

[nruth]

in general, or on heroku?

[sanyam-j]

@nruth On heroku

[nruth]

I too thought it was broken, or heroku's stack (Cowboy stripping headers) but with some fighting I got it to work just now using heroku -> cloudfront -> user

gem 'bootstrap-sass', '~> 3.3.5'
gem 'sass-rails', '>= 3.2'
gem 'font-awesome-sass', '~> 4.3.0'
gem 'font_assets'

config.font_assets.origin = '*'

also have this in application.rb which is duplication I haven't removed yet, so the headers might be getting set by rack-cors instead of this gem:

    config.middleware.insert_before ActionDispatch::Static, 'Rack::Cors', logger: (-> { Rails.logger }) do
      allow do
        origins '*'
        resource '*', headers: :any, methods: [:get]
      end
    end

and each time I redeployed I changed my config.assets.version in production.rb to make sure caching wasn't getting in the way. Much easier to do that than use cloudfront expiry requests.

cloudfront behaviours set up to forward Origin, Access-Control-Request-Method and Access-Control-Request-Headers. I want to try removing the ones other than Origin, but just happy it loaded the fonts for now.

How I debugged:

• Load your site in chrome, check the developer tools' console for CORS errors, and the network tab to see what URL it's hitting for your assets
• if your asset urls are not pointing to hashed urls you are loading the scss in the wrong order, e.g. load font-awesome-sprockets before font-awesome, and the same for bootstrap-sprockets and bootstrap.
• if you have CORS errors in the browser console the headers are not reaching your browser. Debug with curl: try against cloudfront, and directly against your rails app. If the Access-Control headers are missing you have a problem, and the problem is in your rails app, or you are being served a cached response from before you fixed your rails app. Try changing config.assets.version so all your asset hashes change.

curl -I 'https://yourapp.herokuapp.com/assets/font-awesome/fontawesome-webfont-9e540a087924a6e64790149d735cac022640e4fa6bff6bd65f5e9f41529bf0b3.ttf' -s

curl -I 'https://l3kjlkjf.cloudfront.net/assets/font-awesome/fontawesome-webfont-9e540a087924a6e64790149d735cac022640e4fa6bff6bd65f5e9f41529bf0b3.ttf' -s

[mepster]

@nruth thanks for the super helpful comment & detailed description of how to debug.

On cloudfront I am only forwarding Origin, seems to work. I am on rails 4.2.1.

BTW, notice that release 0.1.11 of this gem doesn't have the newer woff2 mime-type. There are a couple more commits after that release and one of them includes it.

You can include the gem in your Gemfile like this instead to get woff2: gem 'font_assets', github: 'ericallam/font_assets', ref: '457dcfddc4318e83679e9a0935612924b7717085'

@ericallam how about a 0.1.12 release of font_assets with the latest commits so that woff2 is included by default? (Thanks for the gem!)

Edit: I created a new Distribution, and it did not work with only Origin being forwarded (lots of 404 errors). When I added the following, then it started to work: Access-Control-Allow-Headers Access-Control-Allow-Methods Access-Control-Allow-Origin Access-Control-Max-Age

[dimroc]

Are any of you using nginx or passenger? See below: http://stackoverflow.com/questions/25945419/how-do-i-configure-access-control-allow-origin-with-rails-and-nginx

[bsbodden]

Nope.