Gmail、Outlook、Apple Mail で崩れないHTMLメール用のフォントスタック、Webフォントを読み込める受信箱、そして自分の端末で各スタックを試せるプレビューを紹介します。
メール用の Web セーフフォントとは、Windows と macOS の両方に最初から入っている書体のことで、Arial、Verdana、Tahoma、Trebuchet MS、Georgia、Times New Roman、Courier New などがあります。Gmail と Yahoo Mail は独自のWebフォントを無視するため、font-family は必ず、これらのいずれかと総称ファミリーで終わるスタックとして書きましょう。
@font-face でブランドフォントを読み込む場合は、改行位置があまりずれないよう、字幅の近い Web セーフの代替フォントを選びましょう。
Segoe UI は Windows には入っていますが macOS にはなく、Helvetica は macOS には入っていますが Windows 11 の一覧にはありません。スタックでは Arial と組み合わせましょう。
よくある質問
HTMLメールで安全に使えるフォントはどれですか？
主要な2つのデスクトップOSの両方にあるフォントです。Arial、Verdana、Tahoma、Trebuchet MS、Georgia、Times New Roman、Courier New は、いずれも Microsoft の Windows 11 フォント一覧と Apple の macOS Sequoia フォント一覧に載っています。
Windows の Outlook で Times New Roman が表示されるのはなぜですか？
Windows 向けの従来の Outlook は @font-face ルールを受け付けますが、リモートのフォントを無視します。caniemail.com によると、その場合テキストが Times New Roman に代替されることがあります。スタックの前のほうに Web セーフフォントを置けば避けられます。