HTMLメールでWebフォントなどを指定する際の注意点

最近はよくHTMLメールでWebフォントを使いたい、フォントを明朝体にしたいという相談をいただいています。
表示結果を下記にまとめましたのでご一読いただければ幸いです。
とても不可解な点があります。わたしもそんなことってある？と思いました笑。

<目次>

font-familyの指定について（2019年10月検証時の情報です）

font-familyの指定について（2019年10月検証時の情報です）

HTMLメールは外部のCSSが読み込めないメーラーがあるため、Webフォントを使用する際はご留意ください。
デフォルトのフォントはbodyタグで指定します。
headタグ内に書いてもCSSが効かないメーラーが多いため、bodyタグに記載しています。

<body style="font-family:'ヒラギノ角ゴ Pro W3', Hiragino Kaku Gothic Pro, 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', MS PGothic, sans-serif">

ただし、bodyタグに記載してもCSSが効かないメーラー（PCブラウザのYahoo!メール）はあります。
フォントを指定しなければ、iPhoneのYahoo!メールアプリだけ明朝体になってしまうため、指定するようにしてください。
※ブラウザのYahoo!メールはゴシック体になります。アプリだけです。
ゴシック体、明朝体、Webフォントの表示結果については以下にそれぞれまとめています。

ゴシック体について

font-familyを指定する際は、san-serifを”では括らないでください。
”で括ると、iPhoneだけ明朝体になります。

指定する際は下記ソースを参考にしてください。

<span style="font-family:san-serif;">san-serif ABCDE12345 ゴシック体</span>

▼対応メーラー
全メーラー

明朝体について

Android端末は日本語の明朝体が入っていませんので、font-familyでserifを指定しても明朝体にはなりません。
また、serifを”では括らないでください。明朝体にならないメーラー（Thunderbird、Gmail）があります。

指定する際は下記ソースを参考にしてください。

<span style="font-family:serif;">serif ABCDE12345 明朝体</span>

▼対応メーラー
PC：Thunderbird、Mac Mail
PCブラウザ：Gmail、Outlook.com
iPhone：メールアプリ、Gmailアプリ、Yahoo!メールアプリ
iPhoneブラウザ：Gmail、Yahoo!メール

▼英数字のみ明朝体になるメーラー（漢字やひらがな・カタカナはゴシック体）
PC：Outlook2010、Outlook2013、Outlook365
Android：Gmailアプリ、Yahoo!メールアプリ、auメールアプリ
Androidブラウザ：Gmail、Yahoo!メール

▼非対応メーラー
PCブラウザ：Yahoo!メール

Webフォントについて

headタグ内でCSSを読み込ませるので、headタグのCSSが効かないメーラーはすべてデフォルトのフォントになります。
※以下はNoto Serif JP（ノト明朝）で検証しました。

<span style="font-family:Noto Serif JP;">Noto Serif JP ABCDE12345 ノト明朝</span>

▼対応メーラー
PC：Thunderbird、Mac Mail
iPhone iOS11以降：メールアプリ
Android：auメールアプリ

▼明朝体になるけれどノト明朝ではないメーラー
PCブラウザ：Outlook.com
iPhone iOS11以降：Gmailメールアプリ、Yahoo!メールアプリ

▼英数字のみ明朝体になるけれどノト明朝ではないメーラー
PC：Outlook2010、Outlook2013、Outlook365
※Outlook365だけ英数字が他の明朝体とも違う

▼非対応メーラー
iPhone iOS10：メールアプリ、Gmailメールアプリ
Android：Gmailアプリ、Yahoo!メールアプリ
PC・Androidブラウザ：Gmail、Yahoo!メール

以上となります。
思った以上に対応されていない結果だったのではないでしょうか。HTMLメールを作る際、どうしてもWebサイトと同じように考えてしまいますが、まだまだメーラー独自の仕様がはびこっています。一つずつメーラーを検証するのはとても時間がかかります。お客様にフォントについてご相談された際は、本記事を案内いただければお役に立つと思います。

HTMLメール作成の予定やお困りごとがございましたら、ご依頼・ご相談いただけますと幸いです。お問い合わせはこちら