S3バケットにWebフォントをアップロードしてCORSを設定する
2021/01/09
Webフォントファイルは、モジワク研究さんのマメロンを使用させていただきました。
マメロン
[ダウンロード]ボタンでダウンロードしたwoff2ファイルを、S3バケットwebfontにアップロードしてパブリックアクセスを許可しました。
Webサイト用のhtml-css-sampleというバケットを作成して、以下の2つのファイルをアップロードしました。
sample.css
1 2 3 4 5 6 7 8 9 |
@font-face { font-family: "mamelon"; src: url("https://webfont.s3.amazonaws.com/sample.woff2") format("woff2"); } .fontSampleClass{ font-family: "mamelon"; } |
sample.html
1 2 3 4 5 6 7 8 9 10 |
<head> <meta http-equiv="Content-Type" content="application/json; charset=UTF-8"> <title>Sample</title> <link href="sample.css" rel="stylesheet" type="text/css"> </head> <body> <div class="fontSampleClass">ABCDEFあいうえお</div> </body> |
まずそのままでアクセスしてみます。
フォントは適用されていないようです。
コンソールのログを見てみると、以下のエラーがありました。
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の設定をする必要があります。
設定しました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
[ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "GET" ], "AllowedOrigins": [ "https://html-css-sample.s3.amazonaws.com" ], "ExposeHeaders": [] } ] |
再度アクセスしてみます。
無事Webフォントが適用されました。
最後までお読みいただきましてありがとうございました!
「AWS認定資格試験テキスト&問題集 AWS認定ソリューションアーキテクト - プロフェッショナル 改訂第2版」という本を書きました。
![](https://www.sbcr.jp/wp-content/uploads/2023/01/9784815617929-1-407x596.jpg)
「AWS認定資格試験テキスト AWS認定クラウドプラクティショナー 改訂第3版」という本を書きました。
![](https://www.sbcr.jp/wp-content/uploads/2024/01/9784815625382-3-420x596.jpg)
「ポケットスタディ AWS認定 デベロッパーアソシエイト [DVA-C02対応] 」という本を書きました。
![](https://www.shuwasystem.co.jp//images/book/637791.jpg)
「要点整理から攻略するAWS認定ソリューションアーキテクト-アソシエイト」という本を書きました。
![](https://book.mynavi.jp/files/topics/135344_ext_06_0.jpg?v=1673514682)
「AWSではじめるLinux入門ガイド」という本を書きました。
![](https://www.yamamanx.com/wp-content/uploads/2023/12/81Rp5O9We6L._SY522_.jpg)
![@yamamanx](https://www.yamamanx.com/wp-content/plugins/lazy-load/images/1x1.trans.gif)
開発ベンダー5年、ユーザ企業システム部門通算9年、ITインストラクター5年目でプロトタイプビルダーもやりだしたSoftware Engineerです。
質問はコメントかSNSなどからお気軽にどうぞ。
出来る限りなるべく答えます。
このブログの内容/発言の一切は個人の見解であり、所属する組織とは関係ありません。
このブログは経験したことなどの共有を目的としており、手順や結果などを保証するものではありません。
ご参考にされる際は、読者様自身のご判断にてご対応をお願いいたします。
また、勉強会やイベントのレポートは自分が気になったことをメモしたり、聞いて思ったことを書いていますので、登壇者の意見や発表内容ではありません。
ad
ad
関連記事
-
-
「Amazon EKS Workshop」の環境準備とクラスター作成
今はアーカイブになっている1つ前のEKS Workshopの環境準備記録です。 …
-
-
Amazon Quantum Ledger Database(QLDB)でサンプル台帳の作成と検証
Quantum Ledger Database(QLDB)を触ったことなかったの …
-
-
Amazon CloudWatch RUMはじめました
新機能 – Amazon CloudWatch RUM をご紹介 2021年12 …
-
-
Amazon Linux2のCloud9でPython CDKのモジュールインストール
AMIがCloud9AmazonLinux2-2021-02-02T16-48の …
-
-
Developers Summit 2018 「AWSのフルマネージドな環境でCI/CDをやってみよう!AWS Cloud9からAWS Fargateへの継続的デプロイをご紹介」を聞きました
※写真は展示のAmazon Echoです。 以下は、思ったことや気になったことを …
-
-
AWS DeepLensセットアップの儀
AWS DeepLensのセットアップを開始します。 AWS DeepLensを …
-
-
AWS EC2でAMI(Amazon Machine Image)を作成しておく
前回まででひとまずRedmineを構築するところまで出来たので、念のためスナップ …
-
-
CloudTrailのログファイルの整合性検証をAWS CLIで実行しました
CloudTrailのログファイルの検証を「有効」にしました。 上記のようなCl …
-
-
AWS Network Firewallの入門
公式のGetting started with AWS Network Fire …
-
-
DynamoDB IAMポリシーで特定属性だけを許可する
検証記録です。 対象テーブル 書籍のサンプルで作ったこちらです。 所属バンドの楽 …