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フォントが適用されました。
最後までお読みいただきましてありがとうございました!
【PR】 「AWS認定試験対策 AWS クラウドプラクティショナー」という本を書きました。
【PR】 「AWSではじめるLinux入門ガイド」という本を書きました。

開発ベンダー5年、ユーザ企業システム部門通算9年、ITインストラクター3年目でプロトタイプビルダーもやりだしたSoftware Engineerです。
質問はコメントかSNSなどからお気軽にどうぞ。
出来る限りなるべく答えます。
このブログの内容/発言の一切は個人の見解であり、所属する組織とは関係ありません。
このブログは経験したことなどの共有を目的としており、手順や結果などを保証するものではありません。
ご参考にされる際は、読者様自身のご判断にてご対応をお願いいたします。
また、勉強会やイベントのレポートは自分が気になったことをメモしたり、聞いて思ったことを書いていますので、登壇者の意見や発表内容ではありません。
ad
ad
関連記事
-
-
「関西AWSスタートアップ勉強会」に行ってきました
第2回 関西スタートアップAWS勉強会に行ってきました。 akippa 拠点数コ …
-
-
JAWS-UG Osaka 第15回勉強会 AWS Summit Tokyo 2016 アップデート追っかけ会
「JAWS-UG Osaka 第15回勉強会 AWS Summit Tokyo …
-
-
AWSアカウント内特定リージョン内のDynamoDBテーブルを全削除するLambda(Python)
やりたいこと タイトル通りですが、特定アカウントの特定リージョン内のDynamo …
-
-
5分でAlexaスキルを作る
「JAWS-UG Osaka 第22回勉強会 東西の中の人が語る!!! Micr …
-
-
EC2 Ubuntu DesktopにRDP
Ubuntu Desktopが必要になりましたので、こちらのAWS EC2でデス …
-
-
AWS OrganizationsでAWSアカウントを25作りたいのでPythonで作った
AWSアカウントを25作る必要があったので、Lambda Python 3.7で …
-
-
kintone webhookからAWS API Gateway – Lambdaを実行しレコードの値を渡す
2017年2月のアップデートでkintoneにWebhook機能がリリースされま …
-
-
RDSのスナップショットをS3へエクスポートが日本語マネジメントコンソールでもできるようになってました
RDSスナップショットをS3にエクスポートする新機能を試そうかと思ったのときは、 …
-
-
よくあるサーバーレスアーキテクチャで質問フォーム
この記事はServerless2 Advent Calendar 2018に参加 …
-
-
Amazon Pollyを使って覚えたい資料を耳から身体に染み込ませる
Amazon Pollyを使うとソースコードを一切かかなくても、テキストを音声に …