如何修改Tailwind CSS默认字体？自定义字体未全局生效求助

方案1：替换Tailwind默认的sans字体栈 #

Tailwind默认给全局元素应用font-sans对应的字体，直接把你扩展的iransans设为sans的默认值即可：

在tailwind.config.ts中修改：

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      fontFamily: {
        iransans: ['IRANSans', 'sans-serif'],
        // 把默认sans字体替换成自定义的IRANSans
        sans: ['IRANSans', 'sans-serif'],
      },
    },
  },
  plugins: [],
}

这样全局所有元素（包括span）都会自动应用这个字体，无需手动添加font-iransans类。

方案2：检查CSS引入顺序和优先级 #

确认index.css里字体定义在Tailwind指令之前，避免被默认样式覆盖：

/* 先定义字体文件 */
@font-face {
  font-family: 'IRANSans';
  src: url('./fonts/IRANSans.eot');
  src: url('./fonts/IRANSans.eot?#iefix') format('embedded-opentype'),
       url('./fonts/IRANSans.woff2') format('woff2'),
       url('./fonts/IRANSans.woff') format('woff'),
       url('./fonts/IRANSans.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* 再引入Tailwind核心样式 */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 可选：给html/body设置字体（和Tailwind的font-sans效果一致） */
html, body {
  font-family: 'IRANSans', sans-serif;
}

方案3：通过Tailwind base层强制全局字体 #

如果不想改动默认sans字体，直接在base层给所有元素指定字体：

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

@layer base {
  * {
    font-family: 'IRANSans', sans-serif;
    /* 若存在样式冲突，可添加!important确保优先级 */
  }
}

这个方法会强制覆盖所有元素的字体设置，适合需要全局统一的场景。

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