Serving Fonts from AWS Cloudfront. - インターファーム開発部ブログ

Twitter Bootstrap が広く認知されるのに伴って多く利用されるようになってきた感のあるウェブフォントですが、つい最近の CloudFront のアップデートで利用が大分容易になりましたので私 @ourass が紹介します。

前提条件

1. S3 にアセットファイルを配置している。
2. 上記 S3 を参照した CloudFront でアセットファイルを配信している。

S3 のバケットに CORS の設定を追加する

S3のバケットのプロパティーを開いて「Permissions」の「Edit CORS Configuration」にて CORS の設定を追加します。

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://example.com</AllowedOrigin>
        <AllowedOrigin>https://example.com</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>