読者です 読者をやめる 読者になる 読者になる

ボクココ

サービス開発を成功させるまでの歩み

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

AWS

これはハマった。。

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叩いてもちゃんと取ってこれるから何が原因か特定するのに時間がかかった。

また一つ勉強になった!