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フォントが適用されました。

最後までお読みいただきましてありがとうございました！

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

「AWS認定資格試験テキスト AWS認定クラウドプラクティショナー改訂第3版」という本を書きました。

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

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

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

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

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

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

Tweet

関連記事

: AWS KMSマルチリージョンキーを確認しました

2021年6月にKMS マルチリージョンキーがリリースされました。マルチリージ …

: AWS License ManagerでAMIからインスタンスの起動を制御

EC2 Image BuilderでRocket.ChatのAMIを作って起動テ …

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

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

: Amazon Glacierのプロビジョニングされた迅速取り出し容量をなぜか購入しました

過去1年ぐらいのAWSコストをCost Explorerで見てまして、10/10 …

: API Gatewayから直接 DynamoDBに書き込む

やりたいこと WebページでOやXを押したときに、どっちを押したかをDynamo …

: AWS Systems Manager Session Managerでログを有効にする

AWS Systems Manager Session Managerでのコマン …

: CloudFrontのカスタムヘッダーがなければALBのルーティングで403レスポンスを返す

大阪リージョンにはWAFがまだないです(2021年４月現在) 今のこのブログの構 …

: Amazon Aurora Serverless のログをCloudWatch Logsに出力する

WordPress W3 Total Cache のDatabaseCacheを …

: AWS認定ソリューションアーキテクトアソシエイトのサンプル問題

AWS認定ソリューションアーキテクトアソシエイトのサンプル問題の解説を会社のブロ …

: EC2 Windows インスタンス PowerShellでメタデータを見る

Linuxインスタンスならcurlコマンドで確認すればいいのですが、Window …

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

NEW POST

: Amazon Q Developer for CLIをmacOSにインストールしました

2025/3/26のAWS Expert Online for JAWSの「Am …

Google ColabでOpenAIを使おうとしてTypeError: Client.init() got an unexpected keyword argument ‘proxies’エラー

import os
from google.colab import userdata
os.environ['OPENAI_API_KEY'] = userdata.get("OPENAI_API_KEY")
from openai import OpenAI
client = OpenAI()

1

2

3

4

5

6

import os

from google.colab import userdata

os.environ['OPENAI_API_KEY'] = userdata.get("OPENAI_API_KEY")

from openai import OpenAI

client = OpenAI()

とある書籍を参 …

: RocketChatの匿名登録時のtoo many requestsエラー対応

匿名ユーザー登録時のtoo many requestsエラー RocketCha …

: Amazon VPCのAmazonProvidedDNSとほかメモ

VPCユーザーガイドのAmazon DNS について理解するの記載内容について実 …

: Amazon SageMakerプロジェクトを使用してMLパイプラインを構築

SageMakerプロジェクトの作成 SageMaker Studioの左ナビゲ …

アーカイブ
アーカイブ