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.

Automatic WebFont Optimization does not work

See original GitHub issue

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 <head> of the document
Inspect the built .next/server/font-manifest.json file

Issue Analytics

State:
Created 2 years ago
Reactions:21
Comments:44 (7 by maintainers)

Top GitHub Comments

20reactions

iMohammadRezacommented, May 6, 2022

Still experiencing this with 12.1.6. Font optimization breaks in pages with getServerSideProps!

15reactions

stephanvanecommented, Feb 19, 2022

Same problem here. ~getInitialProps~ getServerSideProps seems to be causing the issue. Anywhere, not just in the _app.tsx page. (only in production, after running ‘build/start’)

To reproduce on a new project:

pages/_document.jsx

import { Head, Html, Main, NextScript } from "next/document";

const Document = () => {
  return (
    <Html>
      <Head>
        <link
          href="https://fonts.googleapis.com/css2?family=Inter&display=swap"
          rel="stylesheet"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
};

export default Document;

pages/working.jsx

const WorkingPage = () => <>Working font here</>;

export default WorkingPage;

This page works as expected, it contains the html:

<style data-href="https://fonts.googleapis.com/css2?family=Inter&amp;display=swap">@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v7/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfMZs.woff) format('woff')}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v7/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZJhjp-Ek-_EeAmM.woff) format('woff');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v7/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZthjp-Ek-_EeAmM.woff) format('woff');unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v7/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZNhjp-Ek-_EeAmM.woff) format('woff');unicode-range:U+1F00-1FFF}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v7/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZxhjp-Ek-_EeAmM.woff) format('woff');unicode-range:U+0370-03FF}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v7/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZBhjp-Ek-_EeAmM.woff) format('woff');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+1EA0-1EF9,U+20AB}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v7/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZFhjp-Ek-_EeAmM.woff) format('woff');unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/inter/v7/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hjp-Ek-_EeA.woff) format('woff');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}</style>

pages/broken.jsx

const BrokenPage = () => <>Broken font here</>;

export default BrokenPage;

export async function getServerSideProps(context) {
  return {
    props: {},
  };
}

This page doesn’t load the font at all. The html contains:

<link rel="stylesheet" data-href="https://fonts.googleapis.com/css2?family=Inter&amp;display=swap"/>

I’m surprised there are not that many people experiencing this problem. I thought that a web-font in combination with getServerSideProps would be a pretty standard scenario 😃

Top Results From Across the Web

First impressions on Next.js Automatic Font Optimization

Automatic Webfont Optimization is a new feature that shipped with Next.js ... It does not work with other sources, including eg. mirrored ...

Optimize WebFont loading and rendering - web.dev

This post explains how to load WebFonts to prevent layout shifts and blank pages when WebFonts are not available when the page loads....

Optimizing Fonts - Improving your Core Web Vitals - Next.js

Next.js has built-in Automatic Webfont Optimization. By default, Next.js will automatically inline font CSS at build time, eliminating an extra round trip to ......

A Guide to Web Font Optimization - WP Rocket

By default, @font-face lazy loads fonts. This means font requests are delayed until after your page content is loaded. This is a good...

Advanced web font optimization techniques - Pixel Point

Sometimes, passing the font over Font Squirrel may automatically fix this problem. If that doesn't work, you can address it with Custom ...