ヤマムギ

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入門ガイド」という本を書きました。

i

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

 - AWS ,

ad

ad

  関連記事

「Fin-JAWS 第14回 Fin人類育成計画」で話させていただきました!

「Fin-JAWS 第14回 Fin人類育成計画」で話させていただきました。 久 …

JAWS-UG Osaka 第15回勉強会 AWS Summit Tokyo 2016 アップデート追っかけ会

「JAWS-UG Osaka 第15回勉強会 AWS Summit Tokyo …

JAWS-UG 大阪 関西女子合同 Amazon Personalizeハンズオンやってみました

久しぶりに大阪でJAWS-UGに参加です。 Amazon Personalize …

Selenium, Headless ChromeとAWS Lambdaで夜な夜なスクレイピング

このようなアーキテクチャで、Alexaスキルの開発を進めていまして、元となる情報 …

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

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

S3に置いたMP3ファイルをTwilioから電話再生する(AWS Lambda Python)

Google Calendar Twilio ReminderのTwilioを使 …

「re:CAP ~サーバーワークス re:Invent 2018 報告会~」でre:Invent2018について思われたことを聞かせていただいた

サーバーワークスさんのre:Invent re:CAPにおじゃましました。 re …

AWS DeepLens開封の儀

去年(2019年)7月にamazon.co.jpでDeepLens買えますやんっ …

前からできましたっけ??CloudWatch Logsの保持設定を複数まとめて設定

AWSの個人アカウントで要らなさそうなリソースの断捨離をしてます。 CloudW …

AWS Cloud9でJavaサンプルを実行する

リモートで共有開発ができるCloud9便利ですね。 Cloud9でJavaのサン …