ヤマムギ

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ではじめるLinux入門ガイド 」を執筆しました

2020年4月30日に、「AWSではじめるLinux入門ガイド」という本を発行い …

AWS SSOのパスワードリマインダーでADのパスワードを変更

AWS Managed Microsoft ADを構築してユーザー追加までで構築 …

AWS CloudWatch LogsエージェントでAmazon EC2上のNginxのaccess.log , error.log , php-fpm error.log , Linuxのmessages , secureログを収集する

参考ページ クイックスタート: 実行中の EC2 インスタンスに CloudWa …

「雲勉 第1回【勉強会:新技術好き!】AWSマネージドサービス勉強会」に行ってきました

「雲勉 第1回【勉強会:新技術好き!】AWSマネージドサービス勉強会」に行ってき …

AWS EC2でAMI(Amazon Machine Image)を作成しておく

前回まででひとまずRedmineを構築するところまで出来たので、念のためスナップ …

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

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

AWSセルフマネージドAD環境にリモートデスクトップで接続

AWSクイックスタートのActive Directory Domain Serv …

Cloud9のデフォルト設定での権限確認(AWS managed temporary credentials)

Cloud9の環境を作成した際のデフォルトアクセス権限は、環境を作成したIAMユ …

AWS EC2 インスタンスステータスのチェックで失敗 原因はPHP-FPMのOOM-KILLER

先週に引き続きEC2のインスタンスステータスチェックで失敗 再起動するも失敗する …

Amazon Connectのパスワードどころかユーザー名も忘れたのでEmergency accessした

長い間放置していたAmazon Connect環境にアクセスしようとしたところ、 …