Josefin Sans字体在NextJS+Tailwind项目中显示不一致的原因与解决咨询

核心原因 #

1. 字体导入顺序错误：你将@import字体语句放在了Tailwind的基础样式指令之后，导致Tailwind先应用默认的sans-serif字体样式，此时Josefin Sans还未加载完成，浏览器会先渲染 fallback 字体，即使后续字体加载完成，也可能出现渲染偏差或不切换字体的情况。
2. 字体未正确加载：可能存在网络缓存问题，导致浏览器没有获取到Josefin Sans的字体文件，最终 fallback 到系统默认无衬线字体，这会直接造成和Google Fonts官网的显示差异。

解决步骤 #

1. 调整字体导入位置 #

将@import语句移到所有Tailwind指令的最前端，确保字体先被加载，再应用Tailwind样式：

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@400;700&family=Red+Hat+Display&family=Red+Hat+Text:wght@400;500&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

2. 验证字体加载状态 #

打开浏览器开发者工具：

• 在Elements面板选中应用font-josefin的元素，查看Computed样式中的font-family，确认Josefin Sans排在第一位。
• 在Network面板的Fonts标签下，检查是否有Josefin Sans的字体文件被成功加载。

3. 清除浏览器缓存 #

按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新页面，清除旧的样式和字体缓存。

4. （推荐）改用Next.js内置字体优化方案 #

Next.js 13+提供了更可靠的字体加载优化，能避免加载延迟和渲染偏差：

• 在根布局文件（app/layout.tsx 或 pages/_app.tsx）中导入并配置字体：

import { Josefin_Sans } from 'next/font/google';

const josefinSans = Josefin_Sans({
  weight: ['400', '700'],
  subsets: ['latin'],
  display: 'swap',
});

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-CN" className={josefinSans.className}>
      <body>{children}</body>
    </html>
  );
}

• 修改tailwind.config.ts，让自定义字体指向优化后的字体：

import type { Config } from 'tailwindcss';

const config: Config = {
  // 其他配置...
  theme: {
    extend: {
      fontFamily: {
        josefin: [josefinSans.style.fontFamily, 'sans-serif'],
      },
    },
  },
};

export default config;

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