如何在Next.js 14+Tailwind项目中正确引入并渲染本地字体

问题描述 #

在Next.js 14项目中使用多个OTF字体文件，试图通过Tailwind的font-gotham类名调用字体，但浏览器始终渲染默认无衬线字体（font-family: ui-sans-serif, system-ui, sans-serif...），自定义类名被html, :host的默认CSS规则覆盖。仅通过ID选择器或直接覆盖html, :host的font-family能让字体生效，但希望通过Tailwind类名或Next.js官方方式实现，避免频繁修改globals.css。

问题分析 #

1. 重复字体加载逻辑：同时使用Next.js localFont和globals.css的@font-face，导致代码冗余且规则冲突
2. Tailwind配置错误：tailwind.config.js中重复定义theme对象，字体配置被覆盖；字体族定义混乱，重复的gotham键导致有效配置丢失
3. 路径错误：localFont的路径使用../public/fonts/，不符合Next.js对public目录资源的引用规则
4. 颜色配置嵌套错误：colors.colors的嵌套结构无效，导致自定义颜色无法正常使用

解决方案 #

步骤1：统一使用Next.js localFont加载字体 #

删除globals.css中所有@font-face规则，修正localFont的路径并简化layout.jsx代码：

import '@styles/globals.css';
import localFont from 'next/font/local'

import Nav from '@components/Nav';
import Provider from '@components/Provider';

export const metadata = {
    title: 'School',
    description: 'School Official Website'
}

const gotham = localFont({
  src: [
    {
      path: 'fonts/Gotham-Thin.otf',
      weight: '100',
      style: 'normal',
    },
    {
      path: 'fonts/Gotham-Extra-Light.otf',
      weight: '200',
      style: 'normal',
    },
    {
      path: 'fonts/Gotham-Light.otf',
      weight: '300',
      style: 'normal',
    },
    {
      path: 'fonts/Gotham-Book-Regular.otf',
      weight: '400',
      style: 'normal',
    },
    {
      path: 'fonts/Gotham-Medium.otf',
      weight: '500',
      style: 'normal',
    },
    {
      path: 'fonts/Gotham-Bold.otf',
      weight: '600',
      style: 'normal',
    },
    {
      path: 'fonts/Gotham-Black.otf',
      weight: '700',
      style: 'normal',
    },
    {
      path: 'fonts/Gotham-Regular.otf',
      weight: '800',
      style: 'normal',
    },
    {
      path: 'fonts/Gotham-Ultra.otf',
      weight: '900',
      style: 'normal',
    },
  ],
  variable: '--font-gotham'
})

const RootLayout = ({ children }) => {
  return (
    <html lang='en' className={`${gotham.variable} font-gotham`}>
        <body>
            <div className='main'></div>
            <main className='app'>
                <Nav />
                { children }
            </main>
        </body>
    </html>
  )
}

export default RootLayout;

步骤2：修复Tailwind配置文件 #

合并重复的theme定义，清理冗余字体配置，修正颜色结构：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  darkMode: "class",
  important: true,
  theme: {
    extend: {
      fontFamily: {
        gotham: ['var(--font-gotham)', 'sans-serif'],
      },
      fontSize: {
        'sm': '14px',
      },
      fontWeight: {
        'bold': 700,
      },
      colors: {
        'black': '#000000',
        'blue-850': '#012f87',
        'blue-default': '#012F87', 
        'blue-950': '#0A1F4E',
        'neutral-950': '#090909',
        'blue-700': '#103CCC',
        'blue-600': '#1A73E8',
        'green-600': '#34A853',
        'blue-500': '#4285F4',
        'zinc-600': '#5B5B5B',
        'stone-500': '#666666',
        'red-900': '#7E2528',
        'zinc-500': '#808080',
        'stone-200': '#E5E3DF',
        'neutral-200': '#E6E6E6',
        'red-500': '#E94235',
        'zinc-100': '#F2F2F2',
        'neutral-100': '#F5F5F5',
        'yellow-500': '#FABB05',
        'yellow-400': '#FFC600',
        'white': '#FFFFFF',
      },
    },
    screens: {
      xs: "540px",
      sm: "640px",
      md: "768px",
      lg: "1024px",
      xl: "1280px",
      "2xl": "1536px",
      lg_992: "992px",
    },
    container: {
      center: true,
      padding: {
        DEFAULT: "12px",
        sm: "1rem",
        lg: "45px",
        xl: "5rem",
        "2xl": "13rem",
      },
    },
    backgroundColor: theme => ({
      ...theme('colors'),
    })
  },
  plugins: [require("autoprefixer")],
};

步骤3：清理globals.css #

删除所有@font-face规则和ID强制字体代码，保留基础结构：

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@layer utilities {
    .text-balance {
        text-wrap: balance;
    }
}

步骤4：使用Tailwind类名控制字体权重 #

通过font-100到font-900类名切换对应权重的Gotham字体，例如修改Nav.jsx中的lowerNav：

<div id="lowerNav" className="pb-7 pt-[30px] self-stretch flex justify-around items-center bg-blue-default w-full h-[85px] px-[435px] justify-center font-gotham text-[22px] font-500 text-white group">

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