Rails7中使用tailwindcss-rails添加自定义字体失效问题排查

以下是你可能遗漏的关键环节：

• 确保@font-face的字体名称与Tailwind配置完全一致
  检查@font-face中font-family的值，必须和tailwind.config.js里fontFamily.sans数组的第一个元素完全匹配（大小写、空格都要一致）。示例代码：

  /* application.tailwind.css */
  @font-face {
    font-family: 'CustomSans'; /* 名称需与配置里的一致 */
    src: url(asset_path('fonts/custom-sans.woff')) format('woff');
    font-weight: 400;
    font-style: normal;
  }
  

  // tailwind.config.js
  const defaultTheme = require('tailwindcss/defaultTheme');
  
  module.exports = {
    theme: {
      extend: {
        fontFamily: {
          sans: ['CustomSans', ...defaultTheme.fontFamily.sans],
        },
      },
    },
  };
  

• 正确引用Rails资源路径
  Rails的asset pipeline需要用asset_path辅助方法生成正确的字体文件URL，直接写相对路径可能导致浏览器无法加载字体文件（CSS编译成功但字体404时，浏览器会自动 fallback 到system-ui）。

• 确认字体的字重和样式匹配
  在@font-face中明确指定font-weight和font-style，确保和页面中使用的文本样式匹配。比如页面用常规字重（400）但@font-face未定义时，浏览器找不到匹配的自定义字体，会转而使用系统字体。

• 确保页面元素应用了字体类
  尽管Tailwind默认会给<html>标签设置font-sans类，但如果布局中覆盖了这个样式（比如第三方CSS或自定义样式），需要手动给<body>或目标元素加上font-sans类，强制使用自定义的sans字体族。

• 重启Rails服务器
  修改tailwind.config.js后，需要重启Rails开发服务器，确保新的字体配置被加载生效。

• 检查浏览器字体加载状态
  打开浏览器开发者工具的「网络」面板，筛选「字体」类型，确认自定义字体文件是否成功加载。如果返回404，说明路径配置错误，需调整@font-face中的src路径。

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