ヤマムギ

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フォントが適用されました。


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

「AWS認定資格試験テキスト&問題集 AWS認定ソリューションアーキテクト - プロフェッショナル 改訂第2版」という本を書きました。

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

「ポケットスタディ AWS認定 デベロッパーアソシエイト [DVA-C02対応] 」という本を書きました。

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

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

 - AWS ,

ad

ad

  関連記事

AWS Organizationsからアカウントを新規作成してみて

AWS Organizationsでアカウントを新規作成することがありましたので …

AWS Storage Gateway File Gateway on EC2インスタンスにmacOSからNFS接続

S3バケットの作成 S3バケットはあらかじめ作成しておきました。 マネジメントコ …

JAWS-UG関西「AI で人を笑わせてみよう!ハンズオン」に参加しました

AI で人を笑わせてみよう!ハンズオン 灼熱の7月最終日にJAWS-UG関西のオ …

このブログをAWS大阪リージョンへ移行しました

大阪リージョン爆誕!! 朝起きて寝ぼけながらリージョンを見てると。 「大阪リージ …

RDSスナップショットのS3エクスポート結果確認

RDSのスナップショットをS3へエクスポートが日本語マネジメントコンソールでもで …

AWS Systems Managerパラメータストアで「Parameter name must be a fully qualified name.」

パラメータストアでパラメータ階層を作成しようとして、パラメータ名に例えば「wor …

S3オブジェクトロックを試しました

S3オブジェクトロックが必要になる要件に今のところ、出会ってないのでまだ設定した …

CodeCommitリポジトリの復号化のCloudTrailログ確認

ユーザーガイドAWS Key Management Service と AWS …

ヤマムギ vol.7 AWSアカウント作成 & 最初の設定ハンズオン 手順

ヤマムギとは from Mitsuhiro Yamashita 「AWSではじめ …

AWS WAFの個別ルールを設定する

Web ACLを選択して、[Add my own rules and rule …