ヤマムギ

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認定クラウドプラクティショナー 改訂第2版」という本を書きました。

「ポケットスタディ AWS認定 デベロッパーアソシエイト [DVA-C02対応] 」という本を書きました。

「要点整理から攻略するAWS認定ソリューションアーキテクト-アソシエイト」という本を書きました。

「AWSではじめるLinux入門ガイド」という本を書きました。

 - AWS ,

ad

ad

  関連記事

EC2インスタンスWindowsでセッションマネージャーを使う

WindowsのEC2インスタンスでセッションマネージャーを使ってみたことがない …

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

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

T3.nanoで仮想メモリ割当をユーザーデータで実行する

T3.nanoはメモリがだいたい500MBです。 実行する処理によってはメモリエ …

ブラウザからJavaScript SDKを使ってAmazon S3 への写真のアップロードチュートリアルをやってみました

ブラウザから Amazon S3 への写真のアップロードをやってみました。 HT …

当ブログ(WordPress)のCloudFrontのキャッシュヒット率があがった

当ブログの構成です。 S3とALB+EC2 Auto Scalingで構成してい …

CloudFormation Lambda-backedカスタムリソースチュートリアルをやりました

チュートリアル: Amazon マシンイメージ ID を参照するの手順に従ってや …

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

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

Amazon Route 53 Resolverを設定確認

Route 53 Resolverを設定しました。 東京リージョンのVPCをオン …

AWS CloudShellでboto3(SDK for Python)使うならpython3

本の執筆をしていて、ちょっとAWS CLIやSDKのふるまいを確認したいことがあ …

AtomエディタでEC2のファイルを直接編集する

Webページを編集していてEC2のファイルをvimエディタでさわったりしています …