generated at
Fontの最適化
Fontの最適化

GoogleSEO:Ensure text remains visible during webfont load
custom font読み込み時の問題を回避する



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


必要な分だけ読み込む
「ここのタイトルの10文字分だけ欲しい！」みたいなユースケース
読み込み時に &text= を加える
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


Noto Fonts
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
→size-adjust
descent-override
line-gap-override
advance-override