[Rails] Settings for loading web fonts in CloudFront on Heroku

Introduction

You can create a Rails app and place static files on the cloud front to speed it up. However, due to CORS (Cross-Origin Resource Sharing) issues, web font files cannot be read unless they are set properly. config.action_controller.asset_host = 'https://d1adsfkajflajflj.cloudfront.net'

Looking at past articles, it was hard to find because it was hidden in the Edit screen of CloudFront, so I will keep a record.

AWS Console In conclusion, as you can see in the official docs and in the web article, I was able to set the Whitelist Headers by washing the ʻUse Leagacy cache settings item. Add ʻAllowed Origin in the Whitelist Headers section and save. https://aws.amazon.com/jp/premiumsupport/knowledge-center/no-access-control-allow-origin-error/

• Since the cache is listening, if you are trying it on a production server etc., precompile the place where the font of Assets is used again and give it a new file name.

Reference article

Set Access-Control-Allow-Origin for Cloudfront Cached object http://www.366service.com/jp/qa/e9d300384bb16161a2f010337ac5128f

Using web fonts with S3 + CloudFront (FireFox compatible) --Qiita https://qiita.com/Oakbow/items/dae3d383d87d7d0c6344

Resolve the CloudFront "No'Access-Control-Allow-Origin' header is present" error https://aws.amazon.com/jp/premiumsupport/knowledge-center/no-access-control-allow-origin-error/