📦 Amazon Ember ~ Amazon 自社ブランド専用フォント ~

はじめに

実務にてフロントアプリで利用中のフォントが AmazonEmber_Rg.ttf と指定があり、Amazon? なんだこれっと気になったのでざっくり調べてみました。

目次

1. Amazon Emberって何？
2. .ttf って何？
3. 使用方法
4. まとめ
5. 参考文献

🔤 Amazon Emberって何？

Amazon Ember は、Amazon が自社のブランドに合わせて開発した 専用フォント。
Web、モバイルアプリ、Kindle デバイスなど、あらゆる製品やサービスに使われています。

• 読みやすさ重視：長文や小さなサイズでも視認性が高い
• ブランド性：Amazon らしさ（シンプルで親しみやすい感じ）を出すためのデザインバリエーション
• 豊富：Light, Regular, Bold, Italic などスタイルが複数ある

📁 .ttf って何？

.ttf は TrueType Font の略で、広く使われているフォント形式の一つ。
Web やアプリ、OS に組み込みやすい形式です。

✨ 使用方法

~assets は Nuxt の Webpack で解釈されるエイリアス です。
URL ではアクセスできないけど、CSS 内で使うなら以下の記述で読み込める。

• @font-face：フォントの読み込み
• ~assets：Webpack で解釈されるエイリアス

/nuxt/assets/variables.scss

@font-face {
  font-family: 'AmazonFont';
  src: url('~assets/font/AmazonEmber_Rg.ttf') format("truetype");
}

💡 AmazonEmber_Rg.ttf は、Amazon のコーポレートフォントの一つ
💡 Amazon Ember の「Regular（標準）」ウェイトの TrueType フォントファイル

🎉 まとめ

• Amazon Ember は Amazon が自社のブランドに合わせて開発した専用フォント
• assets でURL指定することで AmazonEmber_Rg.ttf をcssで使用可能

Amazon Ember を使いたいなら、Amazon が提供している正式な方法（例えば Kindle 開発など）に従う必要があります。
代替フォントとしては RobotoOpen SansHelvetica など、読みやすくてシンプルな Web フォントも多数あります。

💫 参考文献

• Amzon Ember