Fontの最適化 - mrsekut-p

Fontの最適化

Fontの最適化

GoogleSEO:Ensure text remains visible during webfont load

custom font読み込み時の問題を回避する

https://web.dev/optimize-webfont-loading/

必要な分だけ読み込む

「ここのタイトルの10文字分だけ欲しい！」みたいなユースケース

読み込み時に&text=を加える

code:html

<link href="https://fonts.googleapis.com/css?family=Inconsolata&text=Hello" rel="stylesheet">

https://coliss.com/articles/build-websites/operation/work/google-fonts-optimizing-your-font-requests.html

https://blog.jxck.io/entries/2016-03-14/web-font-noto-sans.html#%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AE%E6%9C%80%E9%81%A9%E5%8C%96

https://b.0218.jp/20150620044014.html

https://csswizardry.com/2020/05/the-fastest-google-fonts/

Next.js

この記事では_app.jsに書いているが、↓のdocsに倣ってpages/_document.jsに書くと良い

_app.jsに書いていると2回読み込まれてた

https://nextjs.org/docs/basic-features/font-optimization

Next.jsのv10.2から入った ref

https://zenn.dev/miyaoka/scraps/76037a34cd0fed

https://dev.to/ekafyi/first-impressions-on-next-js-automatic-font-optimization-32a1

https://iainbean.com/posts/2021/5-steps-to-faster-web-fonts/

読み込みサイズを計測したい

https://postd.cc/a-new-way-to-reduce-font-loading-impact/

ascent-override

descent-override

line-gap-override

advance-override