How to add Google fonts async snippet into Head using App Router #77559
Unanswered
marekgregor
asked this question in
Help
Replies: 1 comment
-
|
The recommended way of using Google Fonts in Next.js is to import them from This way, fonts are hosted statically from your site (no need to send requests to Google), and Next automatically optimizes performance by adding "preload" to links. If you want, you can add "display: swap" when importing the font. https://nextjs.org/docs/pages/building-your-application/optimizing/fonts#google-fonts |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
Summary
Adding this snippet for loading Google Fonts asynchronously seems to be the best solution for performance of my site (I checked with the Lighthouse performance). Unfortunately, I am not able to implement it in a Next.js app using the App Router. Is there any workaround ?
I tried in layout.js use this approach:
<head dangerouslySetInnerHTML={{ __html:, }}>but it is removed when I navigate to other URL ...
Additional information
No response
Example
No response
Beta Was this translation helpful? Give feedback.
All reactions