Font Optimization is not fully working

[okisdev]

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 21.4.0: Fri Mar 18 00:46:32 PDT 2022; root:xnu-8020.101.4~15/RELEASE_ARM64_T6000
    Binaries:
      Node: 17.8.0
      npm: 8.5.5
      Yarn: 1.22.18
      pnpm: N/A
    Relevant packages:
      next: 12.1.4
      react: 18.0.0
      react-dom: 18.0.0

What browser are you using? (if relevant)

Chrome 100.0.4896.60

How are you deploying your application? (if relevant)

Vercel, Heroku

Describe the Bug

Font Optimization is not working fully.

This happened after upgrading to React@18.

I have set up the project and using _document.tsx would like to add some of Google Fonts.

This is what it looks like in _document.tsx.

This is what it should look like after deployment.

However, this is what it looks currently like after deployment.

The href is turned to data-href after font optimization. But, link is not turned to style.

Expected Behavior

Font Optimization should work.

To Reproduce

Since it appears in individual projects, it is normal in most cases. So it's hard to reproduce. I tried, but I can't reproduce it by creating a new project.

[firatciftci]

I am also experiencing the same issue. This problem started after upgrading my project to React 18.0.0.

[irekrog]

Same issue, after upgraded to React 18 external fonts doesn't work after build (on dev works)

[balazsorban44]

Related: #24781 (comment)

[firatciftci]

@balazsorban44 My _document.js file is in the class component format and I am stil experiencing the issue.

[okisdev]

Hi, @balazsorban44. I'm having the same situation as @firatciftci. So, it is may not be because class or function cause this issue.
Besides, as @irekrog said, when using next dev, font optimization works, however, it doesn't work for next build.

[irekrog]

Yep, and I've just noticed one thing. Fonts doesn't work when the page includes getServerSideProps. With static pages using getStaticProps or without any data fetching function fonts works fine.

[ronsj]

From a fresh install and copying exactly what is suggested in the Font Optimization docs. The Inter font does not display.

After some research on font-display: optional it seems like this is the intended behavior.

https://css-tricks.com/really-dislike-fout-font-display-optional-might-jam/

If you’d prefer that if the web font isn’t immediately available, to just show the fallback font and not ever swap to it, even after it’s downloaded. You can! That’s what font-display: optional; does. It still gives the ~100ms font block period (giving the font a fighting chance to show up on first page view), but after that, the fallback is shown and will not swap. Chances are, the font did ultimately get downloaded, and next page view it will be cached and used.

I ended up switching the display param in the Google Fonts URL from optional to swap just to get it to show the Inter font all the time.

[firatciftci]

@ronsj I have display=swap set in the <link /> tag and doing it that way unfortunately does not work:

<link
  href="https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
  rel="stylesheet"
/>

I am not sure how to best achieve setting up font-display: swap; globally though. Any thoughts/recommendations on that so I can try it out and see if it fixes anything?

[Cianekjr]

Temporary fix:
https://nextjs.org/docs/basic-features/font-optimization#disabling-optimization
Add:
optimizeFonts: false,
to your next.config.js.

Then it won't change href to data-href.

[cleberj]

Seems like

next.js/packages/next/server/render.tsx

Line 1310 in 4fb0beb

const generateStaticHTML = supportsDynamicHTML !== true

we always have generateStaticHTML as false.

Hence the processors never work for ssr:

There were some commits 3 months ago regarding this. Not sure if that is what make SSR stop working. I change the code manually to start as TRUE, and the web optimizations started working again.

[cleberj]

@shuding Do you know if this has sth to do with your refactoring? Can you help us, please ?

next.js/packages/next/build/webpack/loaders/next-middleware-ssr-loader/render.ts

Line 66 in 41c0a66

supportsDynamicHTML: true,

[huozhi]

Hi, the fix is landed in next@12.1.7-canary.5, could you try it to see if the issue is reolsved for you?

[okisdev]

Hi @huozhi

I can confirm that this issue has been resolved in next@12.1.7-canary.5.

Thanks

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.