メールテンプレートにカスタムフォントを追加する方法

このページで学べること

Klaviyo Email のテンプレートエディターに新しいフォントを追加して、ブランドのスタイルに合わせてメールをカスタマイズする方法を説明します。この記事では、カスタムフォントを使用する際のメリットとデメリット、受信箱の幅広い範囲でサポートされているフォントの選び方についても学べます。

メールには、Google Fonts、Adobe Typekit、またはインポートした（セルフホストの）フォントを使用できます。ただし、カスタムフォントに対応しているメール受信箱は限られており、一般的なクライアント（Gmail や Yahoo など）の多くは対応していない点にご注意ください。

This content requires Functional cookies to be enabled.

Update Cookie Settings

主な用語

• カスタムフォント
  Klaviyo エディターのデフォルトで提供されていないフォント
• ウェブフォント
  外部ソースから読み込む必要があるカスタムフォント
• ウェブセーフフォント
  多くのデバイスでローカル保存されているため、外部ソースから読み込まなくても表示できるフォント
• フォールバックフォント
  カスタムフォントに対応していない受信トレイで使用されるウェブセーフフォント

カスタムフォントへの対応と制限

カスタムフォントを使用することで、メールコンテンツとサイトの整合性を保ち、一貫性のあるマーケティングを行えるようになります。 ただし、ウェブフォント（外部ソースから読み込む必要のあるフォント）は、すべてのデバイスやメールクライアントで想定どおりに表示されるとは限りません。Klaviyo のデフォルトフォントは、ほとんどのコンピューターやデバイスにプリインストールされているため、すべての購読者に一貫した体験を提供できます。

ウェブフォントに対応しているメールクライアントには以下のものがあります。

• Apple Mail
• iOS Mail（iOS のデフォルトメールブラウザ）
• Google Android（Android 2.3 は Google Fonts と Adobe Fonts が使用する @import メソッドに非対応）
• Samsung Mail（Android 8.0）
• Outlook for Mac

Gmail などの未対応プロバイダーによるカスタムフォントの扱い

Gmail（およびカスタムフォントに未対応の受信箱プロバイダー）の利用者には、カスタムフォントの代わりにフォールバックフォントが表示される可能性があります（フォールバックフォントはメールテンプレートで設定可能）。これを避けるには、ウェブセーフなカスタムフォントの使用を検討してください。これは、ウェブフォントへの対応とは関係なく、ほとんどのデバイスで利用可能です。

ウェブセーフなフォントはこちら。デバイスごとの対応状況の内訳も確認できます。

メールテンプレートエディターで新しいカスタムフォントを追加する

メールテンプレートにカスタムフォントを追加する手順は以下のとおりです。

1. テンプレート内のテキストブロックをダブルクリックするか、ブロックを選択せずにテンプレートのスタイルタブを開きます。
2. [テキストと見出し] の項目にあるフォントのドロップダウンを開き、メニューの一番下にある「フォントを追加」をクリックします。
3. 表示されるモーダルで、フォントのソースに応じて、Google Font、Adobe Font、またはフォントをインポートを選択します。
4. ご希望のフォントタイプ（Google、Adobe、またはインポートしたフォント）に応じて、この記事の該当セクションの指示に従ってください。

メールテンプレートにフォントを追加すると、他のテンプレートやサインアップフォームでも利用できるようになります。

This content requires Functional cookies to be enabled.

Update Cookie Settings

既存のカスタムフォントにフォントのバリエーションを追加する

カスタムフォントのバリエーションは、選択後に [メディア & ブランド] > [フォント] でいつでも編集、削除、更新できます。

既存フォントの更新

すでに追加しているカスタム Google フォントまたはインポート済みフォントに追加のバリエーションを選択するには：

1. Klaviyo で [コンテンツ] > [画像 & ブランド] に移動します。
2. [フォント] をクリックします。
3. フォント の下で、編集したいフォントを見つけます。
4. フォントの右側にある 3 点リーダーをクリックします。
5. 表示されたメニューから [編集]をクリックします。
6. [選択中のフォントバリエーション：# 種類] をクリックして、フォントバリエーションの一覧を展開します。
7. 追加したいバリエーションを選択してください。
8. [フォントを更新] をクリックします。

アップロード後に Adobe のフォントにバリエーションを追加することはできません。これは、バリエーションが Typekit のリンクに組み込まれているためです。 

A font with this name already exists というエラーメッセージが表示された場合は、フォントを再追加するのではなく、上記の手順に従って既存のフォントバージョンを編集してください。

フォントを削除する

1. Klaviyo で [コンテンツ] > [画像 & ブランド] に移動します。
2. [フォント] をクリックします。
3. フォント の下で、編集したいフォントを見つけます。
4. フォントの右側にある 3 点リーダーをクリックします。
5. 表示されたメニューから [削除] をクリックします。

現在カスタムフォントを使用している Klaviyo のメッセージは、直ちにフォールバックフォントに変わります。フォントを再度追加すると、それらのメールは再びそのフォントを使用するようになります。

Google のフォントを追加する

Google のフォントを追加する手順は以下のとおりです。

1. 使用したい Google フォント名を入力します。
2. フォールバックフォントを選択します。
3. [フォントを追加] をクリックします。

Adobe のフォントを追加する

Adobe のフォントは、Adobe Fonts に契約しているユーザーのみが使用できます。 Adobe のフォントを追加するには以下の手順に従ってください。

1. Adobe Fonts をクリックします。
2. CSS アドレスを貼り付けてください。アドレスは次の形式に従ってください：https://use.typekit.com/123ABC。
3. フォールバックフォントを選択します。
4. [フォントを追加] をクリックします。

フォントをインポートする

フォントのインポート（セルフホストフォント）は、開発者のサポートを得られる場合にだけ利用することをお勧めします。フォントのファイルを直接 Klaviyo にアップロードすることはできません。開発チームのサポートがない場合は、希望のフォントに近いものを Google または Adobe のフォントの中から見つけることをお勧めします。

インポートしたフォントを使用する手順は以下のとおりです。

1. フォントをお客様のサーバーでホストするか、フォントホスティングサービスをご利用ください。Access-Control-Allow-Origin ヘッダーを * に設定して、Cross-Origin Resource Sharing（CORS）を有効にし、受信者の受信トレイがフォントにアクセスできるようにしてください。CORS について詳細はこちら
2. フォントのホストに成功したら、 フォント追加 モーダルで[フォントをインポート] をクリックし、ホスティング URL を ソースアドレス フィールドに貼り付けます。
3. フォントの名前、太さ、スタイルを適切なフィールドに追加します。
4. フォールバックフォントを選択します。
5. [フォントを追加] をクリックします。

フォールバックフォントを選択する

どのタイプのカスタムフォントを選んでも、フォールバックフォントの設定が必要です。フォールバックフォントは、カスタムフォントに未対応のクライアントを利用している受信者に表示されます。利用可能なオプションのリストから、カスタムフォントに似たスタイルのフォントを選択してください。

例えば、カスタムフォントに Poppins（Google フォント）を選び、フォールバックフォントとして Arial を設定した場合、受信者には次のように表示されます。

• ウェブフォント対応ブラウザ（Apple Mail、iOS Mail など）でメールを開いた受信者には、Poppins が表示されます
• ウェブフォント未対応ブラウザ（Gmail など）でメールを開いた受信者には、Arial が表示されます。

カスタムフォントを適用する

カスタムフォントを設定したら、次を含め、テンプレート内の任意のテキストに適用できます。

• テンプレート全体のスタイル
• ブロックのスタイル内
• テキストブロック内の特定テキスト
• ボタンブロック、商品ブロック、およびテキストを含むその他のすべてのブロックタイプに

カスタムフォントをテキストブロックに適用する手順は以下のとおりです。

1. フォントを適用したいテキストのブロックを選択します。
2. フォントを適用したいテキストをハイライトします。
3. ドロップダウンからカスタムフォントを選択します。

その他のブロックタイプ、またはブロックやテンプレートのスタイルでは、該当するドロップダウンからフォントを選択してください。

テーブルブロックと分岐ブロックでは、カスタムフォントはキャンバス（編集プレビューなど）には表示されますが、左側のパネルには表示されません。 左側のパネルには、カスタムフォントの代わりにフォールバックフォントが表示されます。

カスタムフォントをプレビューで確認する

テンプレートの準備ができたら、自分宛にメールを送信し、問題がないか確認してください。プレビューを送信するには、[プレビューとテスト] を開き、[テストを送信] をクリックしてください。複数の異なるデバイスでメッセージを開いてみて、受信者にどのように表示されるかを確認してください。また、Email on Acid のようなツールを使うと、より多くのデバイスでプレビューを確認できます。

その他のリソース

• メールテンプレートエディター ガイド
• メールで使うフォントを理解する