ヤマムギ

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

  関連記事

Microsoft TeamsのOutgoing Webhooksを使ってAWS Lambda(Python), Amazon API Gatewayとbot

Microsoft Teamsの検証その2、Slackで実装しているbotも対応 …

AWS Lambda(Python3.7)でPandocを実行する

昨日まで(AWS Batch) 昨日までは、Pandocを実行して、S3バケット …

TwilioからのリクエストをAPI Gateway+LambdaでTwimlを返して処理する

Twilioで着信した時のリクエスト先としてTwimlをWebサーバやS3で用意 …

JAWS FESTA 2017 Reverse X re:Birth

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

「関西AWSスタートアップ勉強会」に行ってきました

第2回 関西スタートアップAWS勉強会に行ってきました。 akippa 拠点数コ …

Pandocサーバーのコンテナイメージを作成する

マークダウンからEPUBへの変換をAWS Batchで行いたく、ECRにアップロ …

AWSアカウント内特定リージョン内のDynamoDBテーブルを全削除するLambda(Python)

やりたいこと タイトル通りですが、特定アカウントの特定リージョン内のDynamo …

Amazon Chimeのチャットを使ってみました

Amazon Chimeはビデオミーティングや配信したりというサービスですが、チ …

百聞は一見にしかず!AWSセルフペースラボの無料ラボ!

※2019年5月12日現在に試してみた記録です。 AWSセルフペースラボとは A …

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

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