font-face指定の罠

経緯

たまにものすごい表示のサイトに遭遇するようになった。

なんだこれはぁ…(恍惚)

環境

Windows10, Chrome
※その他の環境は関係ないのでどうでもいい

結論

サイト側フォント指定の問題

@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  src: local(""), /* ←犯人はこいつ */
       url(/xxx/noto-sans-jp-v36-latin_japanese-700.woff2) format("woff2"),
       url(/xxx/noto-sans-jp-v36-latin_japanese-700.woff) format("woff");
  font-display: swap
}

これ

原因

色々切り分けた結果Firefoxでは問題ない
EdgeとChrome、別端末でも起きているのでChromiumが原因ぽい
開発者ツールで検証してみる

冒頭のサイトのfont-family指定

font-family: Noto Sans JP,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Hiragino Sans,Hiragino Kaku Gothic ProN,Arial,Yu Gothic Medium,Yu Gothic,YuGothic,Meiryo,sans-serif;
font-family: var(--default-font-family);

うーん

Noto Sansの指定をローカル名称にしてみる

font-family: Noto Sans CJK JP,-apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Hiragino Sans,Hiragino Kaku Gothic ProN,Arial,Yu Gothic Medium,Yu Gothic,YuGothic,Meiryo,sans-serif;

なるほど？

じゃあフォールバック

font-family: Noto Sans JP,Noto Sans CJK JP, -apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Hiragino Sans,Hiragino Kaku Gothic ProN,Arial,Yu Gothic Medium,Yu Gothic,YuGothic,Meiryo,sans-serif;

は？

書体指定自体を疑い出して順番やらを入れ替えるも何かおかしい

ん？正しい指定できてるタイミングじゃなく指定が崩れた時に正常に表示されてないか？

あっ…

まとめ

発生条件としては、
・Noto Sans JPの指定が入っていて(Webフォントで読み込み)
・ローカルのファイルがある場合はそちらを優先的に表示する指定が入っていて
・ローカルのフォント指定が空の場合
Chromiumでは全く別のフォントが表示される模様

@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  src: local("Noto Sans CJK JP"),/* ←これがないと発生 */
       url(/public/assets/fonts/noto-sans-jp-v36-latin_japanese-regular.woff2) format("woff2"),
       url(/public/assets/fonts/noto-sans-jp-v36-latin_japanese-regular.woff) format("woff");
       font-display: swap
}

@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  src: local("Noto Sans CJK JP"),/* ←これがないと発生 */
       url(/public/assets/fonts/noto-sans-jp-v36-latin_japanese-700.woff2) format("woff2"),
       url(/public/assets/fonts/noto-sans-jp-v36-latin_japanese-700.woff) format("woff");
       font-display: swap
}

開発者自身の環境だと問題ない場合もありそうだし
そもそもローカルにフォントが入っていない環境だと問題なく表示できるでしょうしで
開発者殺しの罠ですね。