ヤマムギ

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


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

【PR】 「AWS認定試験対策 AWS クラウドプラクティショナー」という本を書きました。

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

 - AWS ,

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を使うとソースコードを一切かかなくても、テキストを音声に …