@next/font字体已下载但偶尔不渲染问题排查求助

问题背景 #

网站Hero区域的“TWIST”文本指定使用Pacifico字体，但刷新页面时偶尔会出现字体未加载的异常。观察网络请求确认字体文件每次都能下载完成，但并非每次都能成功应用到目标文本上。当前使用@next/font v13.1.4版本，相关代码如下：

_app.tsx #

import { ShopProvider } from '@/context/shopContext'
import '../styles/tailwind.css'
import type { AppProps } from 'next/app'
import { Montserrat, Pacifico } from '@next/font/google'

const montserrate = Montserrat({
  subsets: ['latin'],
  variable: '--font-montserrat',
})

const pacifico = Pacifico({
  subsets: ['latin'],
  variable: '--font-pacifico',
  weight: ['400'],
})

export default function App({ Component, pageProps }: AppProps) {
  return (
    <ShopProvider>
      <main
        className={`${montserrate.variable} ${pacifico.variable} font-sans`}
      >
        <Component {...pageProps} />
      </main>
    </ShopProvider>
  )
}

Hero区域代码 #

<h1 className="text-4xl font-semibold text-[#F15B50] lg:text-6xl">
     <span className="font-pacifico font-normal">TWIST</span> IT UP
</h1>

tailwind.config.js #

const { fontFamily } = require('tailwindcss/defaultTheme')

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: [
    './app/**/*.{js,ts,jsx,tsx}',
    './pages/**/*.{js,ts,jsx,tsx}',
    './components/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      fontFamily: {
        sans: ['var(--font-montserrat)', ...fontFamily.sans],
        pacifico: ['var(--font-pacifico)', ...fontFamily.serif],
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
  ],
}

修复步骤 #

1. 修正字体实例拼写错误 #

_app.tsx中Montserrat的实例命名存在拼写错误（montserrate应为montserrat），虽然不直接影响Pacifico，但可能导致样式优先级冲突，修正后代码：

const montserrat = Montserrat({
  subsets: ['latin'],
  variable: '--font-montserrat',
})

// 对应更新main的className
<main className={`${montserrat.variable} ${pacifico.variable} font-sans`}>

2. 显式设置字体加载策略 #

通过display属性强制字体加载行为，避免因浏览器字体加载优先级导致的未就绪问题：

const pacifico = Pacifico({
  subsets: ['latin'],
  variable: '--font-pacifico',
  weight: ['400'],
  display: 'swap', // 优先显示 fallback 字体，加载完成后替换
})

可选值说明：

• swap：平衡加载速度与视觉一致性，适合大多数场景
• block：等待字体加载完成后再渲染文本，避免字体切换闪烁

3. 优化Tailwind字体族的Fallback配置 #

调整Pacifico的fallback字体顺序，添加更匹配手写风格的cursive作为中间 fallback：

// tailwind.config.js
fontFamily: {
  sans: ['var(--font-montserrat)', ...fontFamily.sans],
  pacifico: ['var(--font-pacifico)', 'cursive', ...fontFamily.serif],
},

4. 验证字体变量作用域 #

在浏览器开发者工具中检查Hero区域的span元素，确认font-family已正确包含var(--font-pacifico)，若未生效需排查样式是否被其他规则覆盖。

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