Next.js/Tailwind项目字体问题：PC端正常移动端失效求助

方案一：修复现有@import配置 #

• 调整字体导入顺序
  原globals.css中@import位于@tailwind指令之后，会导致Tailwind基础样式覆盖字体设置。将@import移到最顶部：

  @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
  
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  
  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    font-family: 'Raleway', sans-serif;
  }
  
  html,
  body {
    max-width: 100vw;
    overflow-x: hidden;
    font-family: 'Raleway', sans-serif;
  }
  

• 将Raleway设为Tailwind默认字体
  修改tailwind.config.js，替换默认的sans字体为Raleway，确保所有默认字体元素都调用它：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: [
      './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
      './src/components/**/*.{js,ts,jsx,tsx,mdx}',
      './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    ],
    theme: {
      extend: {
        fontFamily: {
          sans: ['Raleway', 'sans-serif'],
        },
      },
    },
    plugins: [],
  }
  

• 强制字体加载优先级
  在globals.css中添加@layer base提升样式优先级，避免被其他样式覆盖：

  @layer base {
    html, body, * {
      font-family: 'Raleway', sans-serif !important;
    }
  }
  

• 清除移动端缓存
  移动端浏览器常缓存静态资源，通过强制刷新（iOS下拉刷新；Android长按刷新按钮选强制刷新）清除旧样式缓存。

方案二：使用Next.js官方字体优化（推荐） #

Next.js的next/font模块自动优化字体加载，避免跨域和移动端加载延迟，稳定性更高：

• 配置全局字体
  在layout.tsx（App Router）或_app.tsx（Pages Router）中导入并配置Raleway：

  import { Raleway } from 'next/font/google';
  
  const raleway = Raleway({
    weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
    style: ['normal', 'italic'],
    subsets: ['latin'],
    display: 'swap',
    variable: '--font-raleway',
  });
  
  export default function RootLayout({
    children,
  }: {
    children: React.ReactNode;
  }) {
    return (
      <html lang="en" className={raleway.variable}>
        <body className={`font-sans ${raleway.className}`}>{children}</body>
      </html>
    );
  }
  

• 关联Tailwind配置
  修改tailwind.config.js绑定全局字体变量：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: [
      './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
      './src/components/**/*.{js,ts,jsx,tsx,mdx}',
      './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    ],
    theme: {
      extend: {
        fontFamily: {
          sans: ['var(--font-raleway)', 'sans-serif'],
        },
      },
    },
    plugins: [],
  }
  

• 清理旧配置
  删除globals.css中的@import语句和手动设置的font-family，避免冲突。

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