ヤマムギ

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 CloudWatch Syntheticsでハートビートモニタリングを実行

このブログに対してハートビートモニタリングのCanaryを実行してみました。 C …

macOSにAWS Schema Conversion Toolをインストール

環境 macOS BigSur バージョン11.5(20G71) MacBook …

Lucidchart AWSアカウントからインポート機能で自動作図

SNSでLucidchartというサービスが話題になってました。 AWSの環境を …

VPCピア接続ではピア先VPCのセキュリティグループIDを指定できる

タイトルどおりです。 できることは知ってたのですが、試したことがなかったので、確 …

AWS Glueチュートリアル

AWS Glueのマネジメントコンソールの左ペインの一番下にチュートリアルがあり …

ヤマムギ vol.8 (AWS)EC2でLinuxサーバー構築ハンズオン 手順

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

執筆環境(PyCharm, CodeCommit, CodePipeline, S3, Lambda, 署名付きURL)

2018年から、年に1回ぐらい商業本の執筆をさせていただいております。 2020 …

Intel 82599 VF インターフェイスで拡張ネットワーキングが有効なEC2インスタンスで帯域幅を確認してみました

拡張ネットワーキングが有効なEC2インスタンスとそうではないインスタンスの2セッ …

AWS Lambda(Python)からAmazon Connectで電話を発信する

自動で電話を発信する必要がありまして、電話発信APIを開発することになりましたの …

AWS LambdaのSQSへの自前ポーリングをやめてSQSイベントソーストリガーに変更した

以前は、LambdaがSQSからメッセージを受信するには、キューをポーリングして …