HTMLメール

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

神原 愛 2019.10.31

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

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

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

<body style="font-family:'ヒラギノ角ゴ Pro W3', Hiragino Kaku Gothic Pro, 'メイリオ', Meiryo, Osaka, 'MS Pゴシック', 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メール作成の予定やお困りごとがございましたら、ご依頼・ご相談いただけますと幸いです。お問い合わせはこちら