next.js icon indicating copy to clipboard operation
next.js copied to clipboard

Published 20 hours ago • verified publisher icon vercel

Font optimization corrupts Google Fonts link

Open Tadynas opened this issue 2 years ago • 12 comments

Verify canary release

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

Provide environment information

Operating System:
  Platform: win32
  Arch: x64
  Version: Windows 10 Home
Binaries:
  Node: 14.17.4
  npm: N/A
  Yarn: N/A
  pnpm: N/A
Relevant packages:
  next: 12.1.6-canary.9
  react: 18.1.0
  react-dom: 18.1.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Font optimization function corrupts font link and does not convert <link> fully into <style> tag. Therefore, fonts are not loaded in production and only way to load them is to disable font optimization

Before the build

<link
  href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
  rel="stylesheet"
/>

After the build

<link
  data-href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
  rel="stylesheet"
/>

Expected Behavior

It should convert <link> to <style> tag

// Before
<link
  href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
  rel="stylesheet"
/>

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

To Reproduce

  1. Add _document.js file to pages folder. I'm using example from Font Optimization page 
// pages/_document.js

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <link
            href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument
  1. run yarn build
  2. run yarn start
  3. open localhost:3000 and inspect <head> with corrupted <link> tag

Tadynas avatar Apr 27 '22 08:04 Tadynas

I confirmed this

fadhilx avatar Apr 29 '22 04:04 fadhilx

Facing the same issue

garganurag89 avatar May 02 '22 08:05 garganurag89

Also existing on 12.1.6 last release

alimtunc avatar May 05 '22 14:05 alimtunc

I confirm this, and it is happening in development environment(without build), actually, I opened a discussion about this.

SalahAdDin avatar May 08 '22 05:05 SalahAdDin

Seems like https://github.com/vercel/next.js/blob/4fb0beb1ee372d56128db16ec02ff88e333d4b2a/packages/next/server/render.tsx#L1310 we always have generateStaticHTML as false. image

Hence the processors never work for ssr:

image

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 avatar May 09 '22 04:05 cleberj

Seems like

https://github.com/vercel/next.js/blob/4fb0beb1ee372d56128db16ec02ff88e333d4b2a/packages/next/server/render.tsx#L1310

we always have generateStaticHTML as false. image Hence the processors never work for ssr:

image

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.

I guess it could be, cause it is not working for me with the last NextJS version.

SalahAdDin avatar May 09 '22 09:05 SalahAdDin

same with me "next": "12.1.6"

conioX avatar Jun 05 '22 05:06 conioX

any news or how to fix this issue?

conioX avatar Jun 05 '22 07:06 conioX

any news or how to fix this issue?

It seems there is no solution yet.

SalahAdDin avatar Jun 05 '22 08:06 SalahAdDin

It's been fixed, wait for 12.1.7 if you can't go canary.

Zharkan avatar Jun 05 '22 11:06 Zharkan

Since there was never a 12.1.7 version, it probably was in v12.2.0

karlhorky avatar Jul 18 '22 16:07 karlhorky

Any update on this?

I'm also unable to get Google Fonts to load in development or production, unless I change the display value from optional to swap.

Non working:

<link href="https://fonts.googleapis.com/css2?family=Inter&display=optional" rel="stylesheet"/>

Working:

<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet"/>

jnahumphreys avatar Sep 18 '22 22:09 jnahumphreys

Font optimization has been superseded by next/font which doesn't have this issue: https://nextjs.org/docs/app/building-your-application/optimizing/fonts#google-fonts

timneutkens avatar Jul 04 '23 10:07 timneutkens

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.

github-actions[bot] avatar Aug 03 '23 12:08 github-actions[bot]