Closed kripod closed 3 years ago
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]
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):
This seems to have been resolved by #26608.
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.
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:
It generates the following code:
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