ヤマムギ

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認定 デベロッパーアソシエイト」という本を書きました。

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

 - AWS ,

ad

ad

  関連記事

Amazon S3アクセスポイント経由からアクション可能なポリシー

S3アクセスポイントを使うことで、複雑で長いバケットポリシーを避け、アクセスポイ …

JAWS FESTA 2019 Sapporo 参加&当日スタッフ&企業サポーターで!

2019年のJAWS FESTA は札幌です! 今回もありがたいことに、所属して …

JAWS-UG関西IoT専門支部 ✕ SORACOM UG 関西「Wio LTE + 絶対圧センサーで遊ぼう!」ワークショップにいってきた

JAWS-UG関西IoT専門支部 ✕ SORACOM UG 関西「Wio LTE …

webフォームからの問い合わせをRedmineに自動登録して対応状況を管理する(API Gateway + Lambda)

先日、検証目的で作成したRedmineの冗長化の一機能として、webフォームから …

kintoneで設定したスケジュールにあわせてlambda(python)からSQSへメッセージを送る

EC2の起動停止をそろそろ手動でやるのも疲れてきそうなのと、やはり停止するのを忘 …

AWS DeepLensセットアップの儀

AWS DeepLensのセットアップを開始します。 AWS DeepLensを …

Amazon EC2 Auto ScalingのVPCは変更できる

EC2 Auto ScalingのVPCは変更できたっけ??と思いまして試しまし …

JAWS FESTA 2017 Reverse X re:Birth

JAWS FESTA 2017 中四国 今年はブログタイトル「JAWS FEST …

ACM(AWS Certificate Manager)の承認メールを受け取るためにAmazon SESを設定する

何のためでもいいのですが、ドメインは持っているけど、そのドメイン宛にメールを送ら …

JAWS-UG Osaka 第14回勉強会 「DIY」 〜自社内システムを作る側からの物申す〜に参加、運営、登壇しました

先日、JAWS-UG Osaka 第14回勉強会 「DIY」 〜自社内システムを …