Font Optimization is not fully working

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.

[okisdev]

Hi @huozhi

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

Thanks