Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Font optimization corrupts Google Fonts link
See original GitHub issueVerify canary release
- I verified that the issue exists in Next.js canary release
Provide environment information
Operating System:
Platform: win32
Arch: x64
Version: Windows 10 Home
Binaries:
Node: 14.17.4
npm: N/A
Yarn: N/A
pnpm: N/A
Relevant packages:
next: 12.1.6-canary.9
react: 18.1.0
react-dom: 18.1.0
What browser are you using? (if relevant)
No response
How are you deploying your application? (if relevant)
No response
Describe the Bug
Font optimization function corrupts font link and does not convert <link> fully into <style> tag. Therefore, fonts are not loaded in production and only way to load them is to disable font optimization
Before the build
<link
href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
rel="stylesheet"
/>
After the build
<link
data-href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
rel="stylesheet"
/>
Expected Behavior
It should convert <link> to <style> tag
// Before
<link
href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
rel="stylesheet"
/>
// After
<style data-href="https://fonts.googleapis.com/css2?family=Inter&display=optional">
@font-face{font-family:'Inter';font-style:normal...
</style>
To Reproduce
- Add _document.js file to pages folder. I’m using example from Font Optimization page
// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document'
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<link
href="https://fonts.googleapis.com/css2?family=Inter&display=optional"
rel="stylesheet"
/>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
)
}
}
export default MyDocument
- run
yarn build - run
yarn start - open
localhost:3000and inspect<head>with corrupted<link>tag
Issue Analytics
- State:
- Created a year ago
- Reactions:15
- Comments:12 (1 by maintainers)
Top Results From Across the Web
Optimizing Google Fonts Performance - Smashing Magazine
The easiest optimization is to simply use fewer font families. Each font can add up to 400kb to your page weight, multiply that...
Read more >Occasional CSS Google font corruption? - Stack Overflow
I am sometimes encountering font corruptions as shown in the image below, when using Open Sans (from Google Fonts) in CSS (as taken ......
Read more >Making Google Fonts Faster in 2022
If you use Google Fonts, a few additional steps can lead to much faster load times. Learn about preconnect, optimal placement, font display, ......
Read more >Download OMGF Pro 3.7.3 to improve Google Fonts in ...
Are Google Fonts slowing down your WordPress site? OMGF Pro is the easiest way to optimize and speed up your website's Google Fonts!...
Read more >Using web fonts – Fonts Knowledge - Google Fonts
Optimizing font loading. Link copied! · Browser requests a page · Browser downloads HTML and linked CSS · Browser parses HTML and CSS...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Any update on this?
I’m also unable to get Google Fonts to load in development or production, unless I change the
displayvalue fromoptionaltoswap.Non working:
Working:
Since there was never a 12.1.7 version, it probably was in v12.2.0