Webフォント読み込み戦略（2021年） - MOL

Preload web fonts 前回、といっても2年前だが、display=swapとはなにかで、Google Fontsを読み込むときはURLパラメータに display=swap をつけるといいよと言った。というわけで、それ以降、『目標をセンターに入れて、display=swap…』と盲目的に考えるようになってた。 おさらいとして display=swap では、まず代替フォントを表示し、Webフォントをダウンロードしたら、随時スワップするという挙動になる。この場合、代替フォントからWebフォントへ切り替わる FOUT (flash of unstyled text) が起こってしまう。こんな感じ↓ 出典：font-face descriptor playground まぁ何も表示されないよりかは良いかと思うわけだが、時は流れ、最近ではWebの指標として、Web Vitalsという

[spark7]

あの辺のパラメータわけわからん。/ 日本語はwebフォントやらん方が良いよ。「うん、スッキリ」

[flirt774]

日本語フォントは重いから（1.8MBとか）、必要な分だけダウンロードする仕様が一番良くて、自分の知る限りだとFontplusのみ動的に提供してる。Google の Noto は文章長くてリピーター多いサイトなら、という感じ

[Falky]

後半のハックは置いといて、display=optional使うならwebfontsが適用された場合とされなかった場合の両方で表示保証しないとダメって話にならん？商業ベースでは使い物にならん機能だなあ

[gyochan]

画像のレイアウトシフトはクリック位置がずれたりしてあかんけど、字のがたつきくらい目くじら立てんでもと思う

[sigwyg]

やめたのかwww

[hirolognet]

“結局、色々調べた結果、t32kにはWebフォントは早すぎると感じたので、本ブログでのNoto Sans JPの読み込みを辞めた。うん、スッキリ。”

[poponponpon]

ますますおまじない感が強くなってきたな。こんなん開発者側にやらせずにブラウザ側で勝手にやってくれるのが1番良いと思うんだが。

[gnt]

日本語webフォント殺すべし。慈悲はない。

[efcl]

WebFontsロード

[ginpei]

かつてはfont-display:swapでフォント読み込み中の文章不可視化を防いだが、CLSが重要視される今日ではfont-display:optionalとpreloadを組み合わせて全体をブロックするのが良さそう、と。フォント使わないのが最善手かも。

[prbaybe]

趣味としては好きだけど仕事ならブルシット極まれリだよなあこういうの。畑耕すほうが億倍よく見える。

[yoiIT]

日本語は諦めるという選択

[nzxx]

ただの個人ブログとかでフォントダウンロードさせられると正直ちょっとイラッとする

[macmacmac]

わ

[hinaloe]

ブラウザを騙す、なるほどね

[retore]

パフォーマンス改善で色々トライしてみて結局「もう游ゴシックでいいじゃん」ってなる定期

[doko]

うへえ。こんな細かいことやらないとならんのだな…

[localnavi]

ホームページ表示高速化の常識が数年を経ずにコロコロ変わるので困る。ウェブフォントの読み込みは難儀なので、とりあえずこれを試してみるか。

[sakurai_youhei]

目標をセンターに入れて

[mayumayu_nimolove]

フォントデータダウンロードするんじゃダメなの？