growing hard days.

S3バケットにWebフォントをアップロードしてCORSを設定する

2021/01/09 2021/01/09

Webフォントファイルは、モジワク研究さんのマメロンを使用させていただきました。
マメロン

[ダウンロード]ボタンでダウンロードしたwoff2ファイルを、S3バケットwebfontにアップロードしてパブリックアクセスを許可しました。

Webサイト用のhtml-css-sampleというバケットを作成して、以下の2つのファイルをアップロードしました。

sample.css

@font-face {
  font-family: "mamelon";
  src: url("https://webfont.s3.amazonaws.com/sample.woff2") format("woff2");
}

.fontSampleClass{
  font-family: "mamelon";
}

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

<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>

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の設定をする必要があります。
設定しました。

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET"
        ],
        "AllowedOrigins": [
            "https://html-css-sample.s3.amazonaws.com"
        ],
        "ExposeHeaders": []
    }
]

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入門ガイド」という本を書きました。

【PR】「ポケットスタディ AWS認定デベロッパーアソシエイト」という本を書きました。

【PR】「AWS認定資格試験テキスト＆問題集　AWS認定ソリューションアーキテクト - プロフェッショナル」という本を書きました。

開発ベンダー5年、ユーザ企業システム部門通算9年、ITインストラクター5年目でプロトタイプビルダーもやりだしたSoftware Engineerです。
質問はコメントかSNSなどからお気軽にどうぞ。
出来る限りなるべく答えます。

このブログの内容/発言の一切は個人の見解であり、所属する組織とは関係ありません。
このブログは経験したことなどの共有を目的としており、手順や結果などを保証するものではありません。
ご参考にされる際は、読者様自身のご判断にてご対応をお願いいたします。

また、勉強会やイベントのレポートは自分が気になったことをメモしたり、聞いて思ったことを書いていますので、登壇者の意見や発表内容ではありません。

Tweet

関連記事

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

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

: JAWS FESTA 2019 Sapporo 参加&当日スタッフ&企業サポーターで！

2019年のJAWS FESTA は札幌です！今回もありがたいことに、所属して …

: JAWS-UG関西IoT専門支部 ✕ SORACOM UG 関西「Wio LTE + 絶対圧センサーで遊ぼう！」ワークショップにいってきた

JAWS-UG関西IoT専門支部 ✕ SORACOM UG 関西「Wio LTE …

: webフォームからの問い合わせをRedmineに自動登録して対応状況を管理する(API Gateway + Lambda)

先日、検証目的で作成したRedmineの冗長化の一機能として、webフォームから …

: kintoneで設定したスケジュールにあわせてlambda(python)からSQSへメッセージを送る

EC2の起動停止をそろそろ手動でやるのも疲れてきそうなのと、やはり停止するのを忘 …

: AWS DeepLensセットアップの儀

AWS DeepLensのセットアップを開始します。 AWS DeepLensを …

: Amazon EC2 Auto ScalingのVPCは変更できる

EC2 Auto ScalingのVPCは変更できたっけ？？と思いまして試しまし …

: JAWS FESTA 2017 Reverse X re:Birth

JAWS FESTA 2017 中四国今年はブログタイトル「JAWS FEST …

: ACM(AWS Certificate Manager)の承認メールを受け取るためにAmazon SESを設定する

何のためでもいいのですが、ドメインは持っているけど、そのドメイン宛にメールを送ら …

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

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

PREV: boto3(Python SDK) s3 get_object でバイト範囲を指定する
NEXT: DynamoDB IAMポリシーで特定項目だけを許可する

NEW POST

: RocketChatからOutgoing Webhookで呼び出されたAPI Gatewayでtokenをリクエスト検証する

本来はWAFでやったほうがよさそうですが、追加料金を発生させたくない場合にAPI …

: AWS Secrets Manager交代ユーザーローテーション

AWS Secrets Managerの交代ユーザーローテーションを確認してみま …

: IAM Access Analyzerの検出をEventBridgeルールで検知して通知する

やりたかったことは使用可能としているリージョンのIAM Access Analy …

: 「Cloudflare Meetup Osaka Kick Off!」に参加しました

Cloudflare Meetup勉強会に参加しました。私、Cloudflar …

: AWSアカウントでルートユーザーが使用されたときにTeamsへ投稿する

Organizations組織内のアカウントのいずれかでルートユーザーが使用され …

自己紹介

[PR] AWS認定試験対策 AWS クラウドプラクティショナー

[PR] AWSではじめるLinux入門ガイド

[PR] ポケットスタディ AWS認定デベロッパー – アソシエイト

[PR] AWS認定資格試験テキスト&問題集 AWS認定ソリューションアーキテクト – プロフェッショナル

[PR]要点整理から攻略する　『AWS認定ソリューションアーキテクト-アソシエイト』

タグ
alexa alexaday2019 api apigateway AWS CentOS cloud9 cloudformation cloudwatch devsumi2018 dynamodb EC2 google iam iot iphone Java jaws jaws-ug kintone lambda Linux m1mac mac Markdown mint MySQL organizations PHP python RDS re:dash Redmine remote s3 Silver sns ssm Twilio vpc waf windows WordPress yamamugi 勉強会

アーカイブ
アーカイブ

AMAZONアソシエイト

「Amazon.co.jpアソシエイト」または「ヤマムギ」は、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイトプログラムである、Amazonアソシエイト・プログラムの参加者です。