Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Documented use of Google Fonts via next/head generates a warning in development mode #34693

Closed
1 task done
lizadaly opened this issue Feb 22, 2022 · 1 comment · Fixed by #34694
Closed
1 task done

Documented use of Google Fonts via next/head generates a warning in development mode #34693

lizadaly opened this issue Feb 22, 2022 · 1 comment · Fixed by #34694
Labels
bug Issue was opened via the bug report template. Font (next/font) Related to Next.js Font Optimization.

Comments

@lizadaly
Copy link

Verify canary release

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

Provide environment information

    Operating System:
      Platform: darwin
      Arch: x64
      Version: Darwin Kernel Version 21.3.0: Wed Jan  5 21:37:58 PST 2022; root:xnu-8019.80.24~20/RELEASE_ARM64_T6000
    Binaries:
      Node: 14.18.1
      npm: 6.14.15
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 12.1.0
      react: 17.0.2
      react-dom: 17.0.2

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

next start

Describe the Bug

When a Google Fonts stylesheet is included in a page by following the font optimization documentation, a warning is generated in the browser console in development mode: Do not add stylesheets using next/head (see <link rel="stylesheet"> tag.

Expected Behavior

I would expect any of:

  • an exemption in the code for Google Fonts or TypeKit here, similar to the font optimization trigger in next/head
  • the font optimization documentation to omit usage on a page and only describe its use in Document
  • the ability to disable the warning in the browser console

(For my use case, never warning on hosted fonts and/or ignoring the warning would be ideal, as I'd like to be able to allow different fonts on a per-page basis, and because the failure cases are unlikely to apply.)

To Reproduce

Include

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

in a page in development mode. Observe the warning in the console.
@lizadaly lizadaly added the bug Issue was opened via the bug report template. label Feb 22, 2022
@balazsorban44 balazsorban44 added Font (next/font) Related to Next.js Font Optimization. area: documentation labels Feb 22, 2022
kara added a commit to kara/next.js that referenced this issue Feb 22, 2022
@kara
Remove page-specific font example from docs
68e66d2 
The Font Optimization docs have an outdated example that recommends
adding fonts via `next/head`. This is an anti-pattern that Next.js
has already warned about through ESLint for a while (see
https://nextjs.org/docs/messages/no-page-custom-font) and is now
starting to warn about through the console because it won't work
well with streaming architecture.

This change removes the outdated example from the docs.
Fixes vercel#34693
@kara kara mentioned this issue Feb 22, 2022
Merged
1 task
@kodiakhq kodiakhq bot closed this as completed in #34694 Feb 22, 2022
kodiakhq bot pushed a commit that referenced this issue Feb 22, 2022
@kara
Remove page-specific font example from docs (#34694)
b3f2b38 
The Font Optimization docs have an outdated example that recommends
adding fonts via `next/head`. This is an anti-pattern that Next.js
has already warned about through ESLint for a while (see
https://nextjs.org/docs/messages/no-page-custom-font) and is now
starting to warn about through the console because it won't work
well with streaming architecture.

This change removes the outdated example from the docs.
Fixes #34693



## Documentation / Examples

- [x] Make sure the linting passes by running `yarn lint`
@lizadaly lizadaly mentioned this issue Feb 23, 2022
Closed
@github-actions
Copy link
Contributor

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 github-actions bot locked as resolved and limited conversation to collaborators Mar 25, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
bug Issue was opened via the bug report template. Font (next/font) Related to Next.js Font Optimization.
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Remove page-specific font example from docs kara/next.js
2 participants
@lizadaly @balazsorban44