WEBフォントをpreloadするのは止めました

今までは<link rel="preload"でWEBフォントを優先してダウンロードしていたのですが、場合によっては逆効果になるのでこれは止めました。

preloadであらかじめWEBフォントを優先してダウンロードしておけば、レンダリングする際にはやくなると思っていたのですが、PCサイトではそのWEBフォントを使っていても、スマホでは使わないこともあり、強制的にダウンロードしたフォントが無駄になってしまうこともあります。

例えば、当サイト運営者の場合、Windows系のPCサイトではMeiryoよりもNotoフォントの方が綺麗だと感じているため、PCサイトではNotoを好んで使ってます。

一方、iPhone系のスマホで閲覧する際はヒラギノの方が綺麗だと思うので、スマホではNotoではなくヒラギノを好んで使っています。

この場合、NotoをpreloadすることでPCサイトではメリットがありますが、スマホではNotoではなくヒラギノに設定しているので、せっかくpreloadでNotoをダウンロードしても意味がなくなってしまいます。

通常、WEBフォントは実際に使う際にダウンロードされるため、@font-faceで指定していても使わなければ問題ありません。

例えば、PCサイトで@font-faceを設定してNotoフォントを指定していたとしても、PCサイト用のメディアクエリでサンセリフを指定して打ち消していた場合、このフォントはダウンロードされません。

上記の場合、フォントサイズはゼロになりましたが、CSSに@font-faceを指定しているだけではダウンロードされず、実際に使う際にダウンロードされます。（※すべてのブラウザで確認したわけではありません。）

一方、上記の場合でも、preloadで設定している場合はHTMLファイルにアクセスすると強制的にダウンロードされます。

そのため、ダウンロードしても使わなかった場合は効率が悪いです。

ほかにも、ブラウザが.woff2に対応していなければ、.woff2をpreloadしても使われないでしょうし、ローカルフォントの方を使うのであれば、この場合も意味がなくなってしまいます。

そのため、preloadで意図的にダウンロードするのではなく、ブラウザに任せてしまった方がかえって効率がよいのではないかと思います。