注：本記事はベストプラクティス紹介ではありません。記事内のフォント指定はわかりやすさを優先しているため、英語フォント名は割愛しておりますので、このまま利用すると意図していないフォントになることがあることご注意ください。

この問題です。池田さんが書いてますが、端的にいうと「フォント指定が甘い」から起きています（Sans Serifがなぜか明朝体で表示されるのは、ブラウザの不具合の模様ですが。本来はゴシック体での表示が期待されています）

例えば以下のフォント指定（説明しやすいように数を絞っています）のWebサイトをmacOS Catalinaで閲覧した時に、今回の「意図していないフォント事件」が起きます。

font-family: 'ヒラギノ角ゴ Pro W3','メイリオ','ＭＳ Ｐゴシック',sans-serif;

左からフォントが利用可能かどうかが試行されます。まず、「ヒラギノ角ゴ Pro W3」、これが利用不可能な場合（プラットフォームにインストールされていない場合）に「メイリオ」「ＭＳ Ｐゴシック」がそれぞれ順番に試されます。そして、どのフォントも一致しなかった場合、特定のフォントではなく、一般的なフォントの種類を指す「一般ファミリ（もしくは総称ファミリ）」の「sans-serif」が指定されています。

そして、今回、macOS Catalinaで「ヒラギノ角ゴ Pro W3」がバンドルされなくなった、これが利用不可能で、次に指定していた「sans-serif」が表示されてしまうという問題が起きました。

フォント指定の問題点

このフォント指定を眺めてると気づくと思うのですが、MacOSでのフォントは「ヒラギノ角ゴ Pro W3」ひとつに依存しています。「メイリオ」「ＭＳ Ｐゴシック」はWindowsにバンドルされているフォントなので、MacOSでは利用できず、そのまま「sans-serif」に表示されます。Windowsバンドルフォントは2種類指定されてるのに！！

なので、対処療法としては簡単で「ヒラギノ角ゴ Pro W3」のバックアップフォントを用意すればいいだけです。ProがないOSバージョンがあるなら「ヒラギノ角ゴ W3」を指定すれば事足ります。

font-family: 'ヒラギノ角ゴ Pro W3','ヒラギノ角ゴ W3', 'メイリオ', 'ＭＳ Ｐゴシック',sans-serif;

このように、macOS Catalinaでバンドルされているフォントを追加すると解決します。

個人的な感想

けれど根本的な問題としては、このfont-familyは、すべてのOSでのフォールバックフォントが「sans-serif」であることに起因します。

一般的に、font-familyでは「MacOSではヒラギノ」「Windowsではメイリオ」を選択されることが多く、実はプラットフォームの指定フォントをわざわざ上書きしています。これはユーザがプラットフォームの指定フォントを変更している場合でも、（制作者の）意図したフォントでWebサイトを描画するためです。

この是非についてはここでは述べませんが、「特定プラットフォームで意図したフォントがすべて利用不可能だったため、sans-serifで表示された！」問題を考えると、プラットフォーム指定フォントは「プラットフォーム標準フォントだけど、ユーザがカスタマイズしている場合はそのフォントが表示される」ほうが、よりデバイスとユーザに沿ったデザインを提供できるのではないでしょうか。

なので、積極的にユーザの意図によりそっていくなら

font-family: system-ui;

で十分です。「いやいや、それでもデバイス標準に寄り添いたい」という意図があるなら、デバイスのデフォルトフォントを指定したあと、「sans-serif」の前に「system-ui」を追加するぐらいでよくて、過度にデザインの意図に合うフォントを増やすのは少し違う気がしています。

それでは、また。

告知

Web技術でiPhone/AndroidアプリをリリースするためのIonic Framework入門書を11月に出版します。興味ある方はぜひご予約ください！

備忘

font-family: system-ui;
プラットフォームに設定されているフォント。プラットフォームのフォントが変更された場合はこれも変更される

font-family: -apple-system BlinkMacSystemFont;
Appleのデフォルトフォントとして、San Franciscoとヒラギノフォントが割り当てられてる。MacOS/iOSのみで挙動。ただし、プラットフォームのフォントが優先される。