ヤマムギ

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認定ソリューションアーキテクト - プロフェッショナル 改訂第2版」という本を書きました。

【PR】 「AWS認定資格試験テキスト AWS認定クラウドプラクティショナー 改訂第2版」という本を書きました。

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

【PR】 「要点整理から攻略するAWS認定ソリューションアーキテクト-アソシエイト」という本を書きました。

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

 - AWS ,

ad

ad

  関連記事

EC2スポットインスタンスの中断通知を受ける

オートスケーリンググループでEC2インスタンスをスポットインスタンスで使用してい …

AWS CLIでS3マルチパートアップロードを確認

AWS CLI を使用して、Amazon S3 にファイルをマルチパートアップロ …

kintoneに登録されたアカウントの電話番号にGoogleカレンダーの予定をAmazon Pollyが読み上げてTwilioから電話でお知らせする(AWS Lambda Python)

Google Calendar Twilio Reminder Googleカレ …

AWS EC2 Amazon Linuxにmauticをインストールする(Sendgrid, Nginx, MySQL on RDS)

mauticをAmazon LinuxとNginx,MySQL on RDSにイ …

EC2スケジュールリザーブドインスタンスって終わりましたん?

ユーザーガイドのScheduled Reserved Instancesを見ると …

MySQL WorkbenchからRDSに接続する

MySQL WorkbenchからAWS RDSのMySQLに接続するために、「 …

AWS CDKでクロススタックリファレンスをする

CloudFormationで複数のスタックで参照することがあります。 それをC …

Amazon EC2のAMIイメージを自動取得して保持日数が過ぎたら削除

画像の保存をEC2に戻した事もあってEC2のバックアップの自動取得を勉強がてらや …

名前解決してセッションマネージャが使えるようにVyOSのhost_name.pyを編集しました

発生したエラー セッションマネージャからこんなエラーが出力されました。 [cra …

Active Directory認証でAWSマネジメントコンソールにSSO

こちらの2つのサイトを参考にすすめました。 Active Directory資産 …