NextJS中如何通过webfontloader异步加载网页字体？

当然可以在Next.js中实现网页字体的异步加载，以下是几种实用方案，完全适配Next.js的架构：

方法1：在_document.js中注入异步脚本（服务端渲染层面） #

_document.js是Next.js用来自定义全局HTML结构的入口，适合添加这类全局异步脚本，直接在服务端渲染的HTML中注入，不会阻塞客户端页面加载。

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

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          {/* 异步加载Web Font Loader */}
          <script
            dangerouslySetInnerHTML={{
              __html: `
                WebFontConfig = {
                  google: {
                    families: ['Roboto:400,700', 'Open Sans:300'] // 替换为你的字体列表
                  }
                };
                (function(d) {
                  var wf = d.createElement('script'), s = d.scripts[0];
                  wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
                  wf.async = true;
                  s.parentNode.insertBefore(wf, s);
                })(document);
              `,
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

方法2：在_app.js中通过useEffect动态加载（客户端侧） #

如果不想修改_document.js，可以在全局应用组件中用useEffect触发脚本加载，确保仅在客户端执行，避免服务端渲染报错。

import { useEffect } from 'react';
import App from 'next/app';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    const loadWebFont = () => {
      window.WebFontConfig = {
        google: {
          families: ['Roboto:400,700'] // 替换为你的字体列表
        }
      };
      const wf = document.createElement('script');
      wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js';
      wf.async = true;
      document.scripts[0].parentNode.insertBefore(wf, document.scripts[0]);
    };

    loadWebFont();
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

方法3：使用Next.js官方next/script组件（Next 11+推荐） #

Next.js 11及以上提供了专门的next/script组件，支持多种加载策略，更符合Next.js的性能优化最佳实践。

import Script from 'next/script';
import App from 'next/app';

function MyApp({ Component, pageProps }) {
  return (
    <>
      {/* 先配置WebFontConfig，确保脚本加载前配置已存在 */}
      <Script id="webfont-config" strategy="beforeInteractive">
        {`
          window.WebFontConfig = {
            google: {
              families: ['Roboto:400,700'] // 替换为你的字体列表
            }
          };
        `}
      </Script>
      {/* 异步加载Web Font Loader脚本 */}
      <Script
        src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"
        strategy="async"
      />
      <Component {...pageProps} />
    </>
  );
}

export default MyApp;

额外性能优化：控制字体加载体验 #

可以在WebFontConfig中添加回调，避免页面加载时的字体闪烁问题：

WebFontConfig = {
  google: {
    families: ['Roboto:400,700']
  },
  fontloading: () => {
    document.documentElement.classList.add('fonts-loading');
  },
  fontactive: () => {
    document.documentElement.classList.remove('fonts-loading');
    document.documentElement.classList.add('fonts-loaded');
  }
};

配合CSS：

/* 字体加载中使用系统 fallback 字体 */
.fonts-loading body {
  font-family: system-ui, -apple-system, sans-serif;
}
/* 字体加载完成后切换目标字体 */
.fonts-loaded body {
  font-family: 'Roboto', sans-serif;
}

内容的提问来源于stack exchange，提问作者cikcirikcik