Font load optimization #564
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
davidrans
left a comment
davidrans
left a comment
There was a problem hiding this comment.
The docs for pages/_document are here: https://nextjs.org/docs/advanced-features/custom-document
Thanks for making this change @federicobadini!
CR ☕
|
Font is linked and css is there: QA 😺 |
| <Html> | ||
| <Head> | ||
| <link | ||
| href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Lato:wght@400;700&display=swap" |
There was a problem hiding this comment.
Google dislikes any second paint above the fold. It's likely setting font-display: optional would fix it (https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display)
Optional will force the first load of "slow" users to not use our font(s) and thus fallback to the browser defaults.
It's possible to style the browser defaults close to the actual font, which is what we do on the main site. It's a pain to style and may not be worth it right now.
| href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Lato:wght@400;700&display=swap" | |
| href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Lato:wght@400;700&display=optional" |
There was a problem hiding this comment.
I think what we have here in this pull is an improvement, so let's kick this suggestion to a new issue
closes #559
This PR moves font links (and other link/meta) from
next/headto_document.tsx.This enables nextjs font optimization.
QA
@font-faceinstruction have been embedded in the page at build time