メールマーケティングデータ分析・活用BtoBマーケティングその他トップBLOGメールマーケティングHTMLメールでWebフォントなどを指定する際の注意点HTMLメールでWebフォントなどを指定する際の注意点2019/10/31メールマーケティング神原愛249最近はよくHTMLメールでWebフォントを使いたい、フォントを明朝体にしたいという相談をいただいています。表示結果を下記にまとめましたのでご一読いただければ幸いです。不可解な点があります。わたしもそんなことってある?と思いました笑。<目次>font-familyの指定について(2019年10月検証時の情報です)ゴシック体について明朝体についてWebフォントについてfont-familyの指定について(2019年10月検証時の情報です)HTMLメールは外部のCSSが読み込めないメーラーがあるため、Webフォントを使用する際はご留意ください。デフォルトのフォントはbodyタグで指定します。headタグ内に書いてもCSSが効かないメーラーが多いため、bodyタグに記載しています。sans-serif">ただし、bodyタグに記載してもCSSが効かないメーラー(PCブラウザのYahoo!メール)はあります。フォントを指定しなければ、iPhoneのYahoo!メールアプリだけ明朝体になってしまうため、指定するようにしてください。※ブラウザのYahoo!メールはゴシック体になります。ゴシック体、明朝体、Webフォントの表示結果については以下にそれぞれまとめています。ゴシック体についてfont-familyを指定する際は、san-serifを”では括らないでください。”で括ると、iPhoneだけ明朝体になります。指定する際は下記ソースを参考にしてください。明朝体についてAndroid端末は日本語の明朝体が入っていませんので、font-familyでserifを指定しても明朝体にはなりません。serifを”では括らないでください。明朝体にならないメーラー(Thunderbird、Gmail)があります。指定する際は下記ソースを参考にしてください。MailPCブラウザ:Gmail、Outlook.comiPhone:メールアプリ、Gmailアプリ、Yahoo!メールアプリiPhoneブラウザ:Gmail、Yahoo!メール▼英数字のみ明朝体になるメーラー(漢字やひらがな・カタカナはゴシック体)PC:Outlook2010、Outlook2013、Outlook365Android:Gmailアプリ、Yahoo!メールアプリ、auメールアプリAndroidブラウザ:Gmail、Yahoo!メール▼非対応メーラーPCブラウザ:Yahoo!メールWebフォントについてheadタグ内でCSSを読み込ませるので、headタグのCSSが効かないメーラーはすべてデフォルトのフォントになります。JP(ノト明朝)で検証しました。iOS10:メールアプリ、GmailメールアプリAndroid:Gmailアプリ、Yahoo!メールアプリPC・Androidブラウザ:Gmail、Yahoo!メール以上となります。思った以上に対応されていない結果だったのではないでしょうか。HTMLメールを作る際、どうしてもWebサイトと同じように考えてしまいますが、まだまだメーラー独自の仕様がはびこっています。一つずつメーラーを検証するのはとても時間がかかります。お客様にフォントについてご相談された際は、本記事を案内いただければお役に立つと思います。HTMLメール作成の予定やお困りごとがございましたら、ご依頼・ご相談いただけますと幸いです。お問い合わせはこちら※記載されている内容は掲載当時のものであり、一部現状とは内容が異なる場合があります。最新のCRM事例やノウハウ、新着ブログ、セミナーなどマーケティングに役立つ情報をお届けします。内容をご確認いただき、ご同意ください。運営サイト資料ダウンロードお問い合わせ0120-689-667。