使用Tailwind CSS时Google Fonts无法渲染的问题求助

问题诊断 #

从你的代码来看，核心问题出在两个地方：

• Tailwind未扫描到目标HTML文件：你的tailwind.config.js中content仅配置了./src/**/*路径，但如果HTML文件在根目录（而非src文件夹下），Tailwind无法检测到你使用的font-std、font-alt类，导致这些自定义字体规则不会被生成到output.css中——这就是编辑器hover时显示属性更改，但页面刷新后无效果的原因。
• 字体加载顺序错误：当前你先引入Tailwind的output.css，再加载Google Fonts，可能导致字体优先级被覆盖。

修复步骤 #

1. 修正Tailwind的content配置 #

确保content包含所有使用Tailwind类的文件路径。如果HTML在根目录，修改配置如下：

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 包含根目录HTML及src下所有相关文件
  content: ["./*.html", "./src/**/*.{html,js,css}"],
  theme: {
    extend: {
      fontFamily: {
        std: ["Inter", "sans-serif"],
        alt: ["Arvo", "serif"],
      }
    },
  },
  plugins: [],
}

2. 调整字体链接加载顺序 #

将Google Fonts的链接放在Tailwind CSS之前，确保字体先加载完成：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 先加载Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Arvo&family=Inter:wght@200;400;600&display=swap" rel="stylesheet">
    <!-- 再加载Tailwind生成的CSS -->
    <link href="/dist/output.css" rel="stylesheet">
    <title>Test Website</title>
</head>
<body>
    <div class="text-xl font-std">test font 1</div>
    <div class="text-xl font-alt">test font 2</div>
</body>
</html>

3. 重新构建Tailwind CSS #

修改配置后，重新运行构建命令，确保新规则生成到output.css中：

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

验证方法 #

打开浏览器开发者工具，查看对应元素的font-family属性：

• font-std元素应显示"Inter", sans-serif
• font-alt元素应显示"Arvo", serif
  若属性正确但字体仍未生效，可检查网络面板确认Google Fonts是否成功加载。

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