マニュアル キャンセル

HTML 電子メールまたはニュースレターでの Web フォントの使用

  1. Adobe Fonts ユーザガイド
  2. はじめに
    1. システムおよびサブスクリプション要件
    2. ブラウザーと OS のサポート
    3. コンピューターへのフォントの追加
    4. Web サイトへのフォントの追加
    5. CC Mobile でのフォントの追加
  3. フォントのライセンス
    1. フォントのライセンス
    2. アカウントの管理
    3. Creative Cloud エンタープライズ版のお客様へのライセンス供与について
    4. アカウントへのフォントライセンスの追加
    5. サブスクリプションライブラリからのフォントの削除
    6. 中国で登録された Adobe ID は Adobe Fonts の利用対象外
    7. Creative Cloud サブスクリプションにこれらのフォントが含まれていない理由
    8. 2021 年 9 月に Morisawa フォントを一部提供を停止
  4. フォントの入手と使用
    1. Creative Cloud アプリケーションでの Adobe Fonts の使用
    2. フォントの管理
    3. デスクトップアプリケーションでの見つからないフォントの解決
    4. InDesign でのフォントの使用
    5. フォントとタイポグラフィ
    6. HTML5 Canvas ドキュメントでの web フォントの使用
    7. InCopy でのフォントの使用
    8. Muse での web フォントの使用
    9. フォントファイルのパッケージング
    10. トラブルシューティングガイド:フォントの追加
    11. 追加したフォントがフォントメニューに表示されない
    12. 「1 つ以上のフォントを追加できません」または「同じ名前のフォントが既にインストールされています」
    13. 現在使用しているフォントがフォントメーカーによって更新された場合
  5. Web デザインと開発
    1. Web サイトへのフォントの追加
    2. トラブルシューティングガイド:web サイトへのフォントの追加
    3. フォントの問題のトラブルシューティング
    4. HTML 電子メールまたはニュースレターでの web フォントの使用
    5. Accelerated Mobile Pages(AMP)を使用した web フォントの使用
    6. CSS セレクター
    7. font-display settings を使用した web フォントのパフォーマンスのカスタマイズ
    8. 埋め込みコード
    9. ダイナミックサブセットと web フォント提供
    10. フォントイベント
    11. Web フォントが use.typekit.net から読み込まれるのはなぜですか。
    12. サイトが use.typekit.net に接続できない
    13. CodePen での web フォントの使用
    14. ブラウザーと OS のサポート
    15. ドメイン
    16. ローカル開発環境での web フォントの使用
    17. コンテンツセキュリティポリシー
    18. Web フォントの印刷
  6. 言語サポートと OpenType 機能
    1. 言語サポートとサブセット
    2. OpenType 機能の使用
    3. CSS での OpenType 機能の構文
  7. フォント技術
    1. OpenType-SVG カラーフォント
    2. 貂明朝:バージョン 1.000 からのアップデートに関する要点

@import CSS 埋め込みコードを使用すると、カスタム Web フォントを HTML 電子メールまたはニュースレターに含めることができます。

注意:

JavaScript によるフォントの読み込みは、東アジアの Web フォントの提供に必要な、アドビのダイナミックサブセットに使用されます。CSS 埋め込みコードオプションがないので、これらの Web フォント(中国語、日本語および韓国語の言語サポートのあるフォントを含む)は、HTML 電子メールでは使用できません。

使用するフォントの選択

Web フォントのチュートリアルに従って、使用するフォントを選択し、プロジェクトを作成します。

埋め込みコードの追加

プロジェクト用の埋め込みコードは、Web プロジェクトページで確認できます。該当するプロジェクト名を探し、「@import リンク」オプションをクリックします。

@import 埋め込みコードを含む <style> タグをフォントファミリー名と共に電子メールの <head> に追加します。

HTML 電子メールで使用される @import 埋め込みコード

テキストにスタイルを適用するために CSS 内で使用するフォントファミリー名は、Web プロジェクトでも表示されます。CSS でのフォントの使用に関する説明を参照してください。

注意:

@Import 埋め込みコードは、他のすべての @import ステートメントと共に <style> タグの先頭に記述する必要があります。そうしなかった場合、フォントは読み込まれません。@import 行の前にリストできるのは、@charset エントリのみです。

Web フォントをサポートする電子メールクライアント

一部の電子メールクライアントは、HTML 電子メールや電子メールの Web フォントをサポートしません。これは、受信者に表示される内容に影響します。電子メールでは必ずフォールバックフォントを指定し、送信前にテストをおこなって、電子メールがすべてのクライアントで正常に表示されることを確認してください。

次に、一般的な電子メールクライアントと Web フォントの互換性の簡単なリストを示します。

クライアント名

互換性

AOL メール

はい

Android メールアプリ(ネイティブ。GMail 以外)

はい

Apple Mail

はい

GMail

いいえ

Google Inbox

いいえ

iOS メール

はい

Outlook 2000

いいえ

Outlook 2011(OS X 10.10 以降)

はい

Outlook 2016(OS X 10.10 以降および Windows 10)

はい

プロジェクトの削除またはサブスクリプションのキャンセル

電子メールキャンペーンで使用しているプロジェクトを削除した場合や、プロジェクトをホストしているサブスクリプションをキャンセルした場合は、送信された電子メールでフォントを使用できなくなります。代わりに、指定したフォールバックフォントまたは電子メールクライアントのデフォルトフォントが使用されます。

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX 2025

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト