Font optimization breaks dynamic font loading #20134
Description
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
Metadata
Metadata
Assignees
Labels
No labels