ヤマムギ

growing hard days.

*

S3バケットにWebフォントをアップロードしてCORSを設定する

      2021/01/09


Webフォントファイルは、モジワク研究さんのマメロンを使用させていただきました。
マメロン

[ダウンロード]ボタンでダウンロードしたwoff2ファイルを、S3バケットwebfontにアップロードしてパブリックアクセスを許可しました。

Webサイト用のhtml-css-sampleというバケットを作成して、以下の2つのファイルをアップロードしました。

sample.css

sample.html

まずそのままでアクセスしてみます。

フォントは適用されていないようです。
コンソールのログを見てみると、以下のエラーがありました。
Access to font at ‘https://webfont.s3.amazonaws.com/sample.woff2’ from origin ‘https://html-css-sample.s3.amazonaws.com’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

webfontバケットでCORSの設定をする必要があります。
設定しました。

再度アクセスしてみます。

無事Webフォントが適用されました。


最後までお読みいただきましてありがとうございました!

【PR】 「AWS認定試験対策 AWS クラウドプラクティショナー」という本を書きました。

【PR】 「AWSではじめるLinux入門ガイド」という本を書きました。

【PR】 「ポケットスタディ AWS認定 デベロッパーアソシエイト」という本を書きました。

 - AWS ,

ad

ad

  関連記事

新規アカウントでAWS Budgetsの設定をしました

新規で組織を作ってAWS Budgetsを久しぶりに設定しました。 作成してすぐ …

オンプレミスに見立てたオハイオリージョンにVyOSインスタンスを起動して東京リージョンからVPN接続

AWSクイックスタートのActive Directory Domain Serv …

AWS Client VPNを設定しました

ユーザーガイドのクライアント VPN の開始方法に沿ってやりました。 AWSクラ …

AWS Savings Plansを検討しました

今、個人でAWSアカウントを7つ使っています。 Savings Plansが使え …

Amazon CloudSearchにAWS Lambda(Python)からデータをアップロードする

このブログはゆるっとアドベントカレンダー Advent Calendar 201 …

S3 VPCエンドポイント設定前と設定後を確認

S3のVPCエンドポイントを設定した際に、S3バケットのAPIエンドポイントへの …

東京リージョンの1つのAZ(apne1-az2)でt3.nanoスポットインスタンスが拒否されちゃいました

拒否されちゃいました ちょっとした検証をしようとしてて、t3.nanoのスポット …

EC2 Windows インスタンス PowerShellでメタデータを見る

Linuxインスタンスならcurlコマンドで確認すればいいのですが、Window …

Amazon LinuxにRedmine 環境構築(エラーと対応をそのまま記載版)

Amazon Linuxにgit + Redmineの環境を構築してみます。 自 …

EC2インスタンスが到達不能になって復旧してMackerelで監視し始めた

きっとばりばり使っておられる方ならよくある事なんだろうけど、はじめて体験したので …