Font optimizations

[prateekbh]

Description
This PR introduces a new experimental flag optimizeFonts. With this flag turned on, we will grab the <link rel='stylesheet' href='https://fonts.googleapis.com/...'/>(List of font providers to be extended in future PRs) tags and inline it's content. This eliminates the extra round trip that the browser has to make to fetch the font declarations. This helps in faster paints and improved LCP.

Design
The functionality is broken into two parts

1. Gathering the used <link rel='stylesheet' href='https://fonts.googleapis.com/...'/> tags and downloading their content at build time.
2. Replacing the inspected Link tag with a style tag and the content of the href inlined within this style tag at serve/render time.

In order to do the above-said we use.

• A Webpack plugin that looks for <link rel=stylesheet href='https://fonts.google.com/css...'> in 1P code's AST and download their content in font-manifest.json.
• _document.tsx, Next/Head makes these <link rel=stylesheet href='https://fonts.google.com/css...'> inert by switching them to data-href. This can also be done at render/serve time but Next/Head goes and re-renders it to href at client side. This results in double download of the same content.
• PostProcessing step that adds a new style tag for every <link> tag encountered and inline its content.

Note
Making the experimental flag available at all places adds some complexity to the PR. These pieces will be cleaned whenever the flag will be removed

[SalahAdDin]

is there any documentation about this feature?

[willemmulder]

Does this work yet? If I add a link tag to Google Fonts in _document Head, I see it outputted as is, without any optimizations.

Note: when I try to set the Vercel build command to next build --optimizeFonts I get the error Error: Command "next build --optimizeFonts" exited with 1

[SalahAdDin]

Does this work yet? If I add a link tag to Google Fonts in _document Head, I see it outputted as is, without any optimizations.

Note: when I try to set the Vercel build command to next build --optimizeFonts I get the error Error: Command "next build --optimizeFonts" exited with 1

Actually i didn't realize that, finally i just installed the fonts i wanted and it solved the problem.

[prateekbh]

@SalahAdDin we do plan to add documentation when landing this as stable out of experimental

[FBosler]

Does this work yet? If I add a link tag to Google Fonts in _document Head, I see it outputted as is, without any optimizations.
Note: when I try to set the Vercel build command to next build --optimizeFonts I get the error Error: Command "next build --optimizeFonts" exited with 1

Actually i didn't realize that, finally i just installed the fonts i wanted and it solved the problem.

@SalahAdDin could you explain briefly what exactly you mean by "I installed the fonts?" - I am also curious about this feature as font loading takes quite some time.

[SalahAdDin]

@FBosler I installed the fonts from fontsource:

    "fontsource-dm-sans": "^3.0.10",
    "fontsource-nunito": "^3.0.10",

[FBosler]

@SalahAdDin thx! That’s pretty cool, didn’t know about it. So does this still make use of the fontOptimization? Cheers!

[SalahAdDin]

@SalahAdDin thx! That’s pretty cool, didn’t know about it. So does this still make use of the fontOptimization? Cheers!

I use this instead of font optimization, i don't know if it does work or not.

[rodolphoasb]

Hey, @prateekbh! How are you doing? This feature is available in Next version 10.0.1? How can I use this?

[wedneyyuri]

Hi there, I looked at the related links and found an example made by @ivoberger in ivoberger/ivoberger.com@08186a3

[prateekbh]

This should be out of and experimental flags but might not work with react's new JSX. That is a WIP. // @Timer for more accurate info

[tunesmith]

@SalahAdDin we do plan to add documentation when landing this as stable out of experimental

This should be out of and experimental flags but might not work with react's new JSX. That is a WIP. // @Timer for more accurate info

I'm not sure if that was an announcement that this is out of experimental, or if it's saying that taking it out of experimental is delayed because of react's new JSX.

What is the current state of this? Does it still require the experimental flag? Is there any additional documentation?

[prateekbh]

// @janicklas-ralph

[dohomi]

I am also confused about the state of this functionality, it seems not yet documented but activated by default?

[leerob]

In general, if any feature starts as experimental, you can consider it "shipped" once docs land. Further, there will be a release and corresponding blog post that outlines the new feature.

We are working on a new Next.js release, which will provide more guidance on this feature. Stay tuned!

[dohomi]

@leerob I know thats why I am confused about this feature not been mentioned in the docs :-) Basically I was using the Next-Google-Font package and with this feature I have the feeling that both approaches are interfere with each other and I'd like to turn it off.

[leerob]

You will not need next-google-fonts when this is released, as it will result in better font loading performance 👍

[SalahAdDin]

@leerob I'm using Google fonts by its npm package directly, what's about it?

[leerob]

@SalahAdDin we will provide guidance when this feature is released. For now, no action is needed. Thanks!

[rtrembecky]

hi, the automatic fonts optimization landed in next 10.2.0 as stable. where can I found the docs? I can't find more than this blog post (https://nextjs.org/blog/next-10-2#automatic-webfont-optimization) and just putting the example <style> in the _document <Head> section doesn't work - TypeScript complains.
this is what I've tried to put in the <Head>:

<style data-href="https://fonts.googleapis.com/css2?family=Inter">
  @font-face{font-family:'Inter';font-style:normal}
</style>

[MattKetmo]

Hello Richard, the <style> tag is how Next transforms it, not what you have to write. Just keep the standard <link > tag ;)

[rtrembecky]

thanks for the quick reply. and I was just able to find this: https://github.com/vercel/next.js/pull/24572/files
sorry for bothering, it just wasn't very clear to me 🙂 I hope the next docs get deployed soon so there's no more confusion

[SalahAdDin]

thanks for the quick reply. and I was just able to find this: https://github.com/vercel/next.js/pull/24572/files
sorry for bothering, it just wasn't very clear to me I hope the next docs get deployed soon so there's no more confusion

Very useful, but unfortunately it is not available on public documentation yet.