如何在Tailwind CSS中正确使用Google Fonts？排查配置失效问题

以下是排查和解决的核心步骤，按顺序检查：

1. 确认Google Fonts引入是否正确 #

• 确保引入链接包含你需要的字重和样式，比如要用到粗体，就得在链接里指定wght@400;700这类参数，示例：

  <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=Barlow:wght@400;700&display=swap" rel="stylesheet">
  

• 核对链接里的字体名family=Barlow和你配置的字体名完全一致，大小写、拼写不能出错。

2. 检查tailwind.config.js配置 #

• 必须在theme.extend.fontFamily下添加自定义字体，不要直接覆盖theme.fontFamily（除非你要替换所有默认字体），正确配置示例：

  /** @type {import('tailwindcss').Config} */
  module.exports = {
    content: ["./src/**/*.{html,js}"], // 确保路径包含所有用到字体的文件
    theme: {
      extend: {
        fontFamily: {
          barlow: ['Barlow', 'sans-serif'], // 第一个值和Google Fonts字体名一致，第二个是回退字体
        },
      },
    },
    plugins: [],
  };
  

• 注意：配置里的barlow是工具类后缀，对应Tailwind工具类是font-barlow（全小写），不是font-Barlow。

3. 验证工具类使用是否正确 #

• 给元素添加font-barlow工具类，示例：

  <h1 class="font-barlow text-2xl">这是用Barlow字体的标题</h1>
  

• 不要写错工具类名称，Tailwind工具类基于配置key的小写生成。

4. 清除缓存并重启构建工具 #

• 浏览器缓存可能导致旧CSS生效，按Ctrl+Shift+R（Windows/Linux）或Cmd+Shift+R（Mac）硬刷新页面。
• 如果用了Vite、Webpack这类构建工具，修改配置后必须重启服务，Tailwind才会重新生成包含自定义字体的CSS。

5. 排查字体加载和优先级问题 #

• 打开浏览器开发者工具的Network标签，过滤Fonts，确认Google Fonts的字体文件已成功加载（无404错误）。
• 在Elements标签的Computed样式里，查看元素的font-family是否显示Barlow, sans-serif，如果只显示sans-serif，说明字体未加载或配置有误。
• 检查Styles标签，看是否有其他更高优先级的样式（比如行内样式、自定义CSS类）覆盖了font-barlow的设置，这类冲突样式会被划掉，需要调整优先级或移除冲突代码。

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