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

最終更新日 : 2022年11月16日

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

はい

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

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