Web フォントを S3 から読み込む方法

これはハマった。。

WebフォントをS3に上げて、それを読み込もうとしたんだけどちゃんとDLできてるのにWebフォントが表示されなかった。

調べてみるとどうやらWebフォントには特殊なCORS(Cross-Origin Resource Sharing)設定がいるらしく、それをS3内で設定してあげる必要があった。

指定BucketのPermissionのEdit CORS Configurationにて、

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
        <AllowedHeader>Content-*</AllowedHeader>
        <AllowedHeader>Host</AllowedHeader>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

といった感じで Webフォントを使うときは <AllowedHeader>Content-*</AllowedHeader> を入れてあげないといけないようだ。

Chrome Developer Tool だとちゃんとダウンロードできてるみたいだし、実際に URL叩いてもちゃんと取ってこれるから何が原因か特定するのに時間がかかった。

また一つ勉強になった!