Email

Eメールにカスタムフォントを追加する

更新日時 2020年 10月 19日

対象製品

Marketing Hub  Professional, Enterprise
Marketing Hub Basic（旧製品）

カスタムフォントは、最も一般的なEメールクライアントではサポートされていません。読み手への一貫したエクスペリエンスを保証するには、既定のウェブフォントをEメールに使用するのが、ベストプラクティスとなります。設定でマーケティングEメールの標準ウェブフォントを選択できます。

@font-faceと@importは、Apple Mailと他のいくつかのEメールクライアントでのみサポートされています。カスタムコードのHTMLテンプレートのセクションに@font-faceと@importを追加できます。

ご注意ください：コード化されたEメールテンプレートのHTMLにカスタムフォントを追加するには、基本的なHTMLの知識が必要です。コード化されたテンプレートは、ドラッグ＆ドロップEメールエディターではサポートされていません。

コードテンプレートにカスタムフォントを追加するには。次の手順を実行します。
  • HubSpotアカウントにて、［マーケティング］ > ［ファイルとテンプレート］ > ［デザインツール］の順に進みます。
  • ファインダーで、コードテンプレートの名前をクリックしてエディターで開きます。または新しいコードテンプレートを作成します。
  • このコードスニペットをコピーして、<head>タグの間のHTMLコードの<style>セクションに貼り付け、フォントファミリとソースURLを、選択したフォントに置き換えます。
    <style>
@font-face {
    font-family: DeliciousRoman;
    src: url(http://www.font-face.com/fonts/delicious/Delicious-Roman.otf);
}
</style>
  • Eメール本文のフォントを参照します。 
    <span style="font-family: DeliciousRoman;">Describe what you have to offer the customer.</span>
  • Eメールテンプレートに対する他の編集を完了し、[変更を公開]をクリックします。

ご注意ください：Googleフォントはカスタム モジュール フォント フィールドで使用できますが、Eメールには使用できません。これは、カスタムフォントがEメールクライアントで広くサポートされていないためです。代わりに、カスタムモジュールで使用できるのは既定のシステムフォントのみです。
/jp/email/can-i-use-custom-fonts-in-my-email