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

Font optimization breaks dynamic font loading #20134

Closed
kripod opened this issue Dec 12, 2020 · 4 comments
Closed

Font optimization breaks dynamic font loading #20134

kripod opened this issue Dec 12, 2020 · 4 comments
Assignees
@housseindjirdeh
Labels
type: chrome
Milestone
11.1.x

Comments

@kripod
Copy link
Contributor

kripod commented Dec 12, 2020

Bug report

Font optimization has been enabled in the canary releases of Next.js, by #19758. Since then, Google Fonts stylesheets cannot be injected in runtime with next/head.

Describe the bug

I'm using the gist below for loading Google Fonts on demand:

https://gist.github.com/kripod/52c0f37ad6c4d5e84b4e3a7bc976f50b

Usage example:

<GoogleFontsSheet
  fonts={{
    "Source Sans Pro": [
      { wght: 400 },
      { wght: 400, ital: 1 },
      { wght: 700 },
      { wght: 700, ital: 1 },
    ],
    "Playfair Display": [{ wght: 700 }],
  }}
/>

It generates the following code:

import Head from "next/head";

<Head>
  <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet" />
</Head>

However, when passing user-changeable data to the fonts prop of <GoogleFontsSheet>, the corresponding style sheets refuse to load.

To Reproduce

Please see the instructions above.

Expected behavior

Runtime injection of Google Fonts via <link> elements should be allowed. The optimization shouldn't remove elements which load fonts dynamically.

System information

  • OS: macOS
  • Version of Next.js: 10.0.4-canary.5
  • Version of Node.js: 14.15.0
  • Deployment: next start
@kripod kripod added the bug Issue was opened via the bug report template. label Dec 12, 2020
@kripod kripod mentioned this issue Dec 12, 2020
Merged
@Timer Timer added this to the iteration 15 milestone Dec 15, 2020
@Timer Timer added kind: bug and removed bug Issue was opened via the bug report template. labels Dec 15, 2020
@Timer Timer modified the milestones: iteration 15, iteration 16 Dec 30, 2020
@housseindjirdeh housseindjirdeh self-assigned this Feb 23, 2021
@timneutkens timneutkens modified the milestones: Iteration 18, Iteration 19 Apr 8, 2021
@rishi-raj-jain
Copy link

rishi-raj-jain commented Apr 8, 2021 •
edited
Loading

Is this what you're looking forward to https://codesandbox.io/s/tender-pike-vyybw?file=/pages/index.js ?

The above code does fetch fonts on demand, where in right now it'd change the font after 2 seconds in next/head. [Can be done the same with user input]

@patrickhulce patrickhulce mentioned this issue Apr 23, 2021
Closed
@kripod
Copy link
Contributor Author

kripod commented Apr 29, 2021 •
edited
Loading

Unfortunately, this is still an issue, and Next.js 10.2 has been released with this bug. That’s how dynamic font loading looks now (trying to inject <link> elements on the fly):

Uniform-looking fonts

@kripod kripod mentioned this issue Apr 29, 2021
Merged
@timneutkens timneutkens modified the milestones: Iteration 19, Iteration 20 May 3, 2021
@timneutkens timneutkens added this to the Iteration 23 milestone Jun 28, 2021
@kripod
Copy link
Contributor Author

kripod commented Aug 12, 2021

This seems to have been resolved by #26608.

@kripod kripod closed this as completed Aug 12, 2021
@balazsorban44
Copy link
Member

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

@vercel vercel locked as resolved and limited conversation to collaborators Jan 27, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@housseindjirdeh housseindjirdeh

Labels
type: chrome
Projects
None yet
Milestone
11.1.x
Development

No branches or pull requests
6 participants
@Timer @timneutkens @housseindjirdeh @kripod @balazsorban44 @rishi-raj-jain