Description
What version of Next.js are you using?
10.2.0
What version of Node.js are you using?
14.15.4
What browser are you using?
Chrome
What operating system are you using?
macOS BigSur
How are you deploying your application?
Vercel
Describe the Bug
The font style is not inlined even though I added a link to_document.tsx in the following format.
(I'm sure using the Head component exported from next/document)
<Html lang="ja">
<Head>
<meta charSet="utf-8" />
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP" rel="stylesheet" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>I forked next.js to use a local next.js, and the same thing happened.
When I run 'next build', .next/server/font-manifest.json will be generated, but its contents will be empty.
This probably happens only with certain fonts (maybe Japanese font?).
Also, if you run 'yarn dev' after 'yarn build', regardless of whether the font is Japanese or not, the .next/server/font-manifest. json was disappeared, is this a problem?
I found this issue(#19159), but it was already closed and did not solve the problem.
Expected Behavior
The tag is transformed as expected
- link href property is replaced with data-href of the same value
- style tag is created with the same data-href key/value
- style tag contains an inlined font definition
The .next/server/font-manifest.json contains font definitions as fetched from https://fonts.googleapis.com/css...
To Reproduce
- Build and start a server from my minimal repo:
git clone https://github.com/Co9xs/next-automatic-webfont-optimization-sample.git
cd next-automatic-webfont-optimization-sample
yarn
yarn build
yarn dev
- Open http://localhost:3000/
- Inspect the of the document
- Inspect the built .next/server/font-manifest.json file