配置Nuxt+本地Google Fonts模块+Tailwind：解决Source Serif Pro不渲染问题

在Nuxt项目中配置了本地Google Fonts模块与Tailwind CSS，Roboto字体可正常渲染，但衬线字体Source Serif Pro始终无法在应用中显示。尝试过Tailwind配置中的多种写法（数组、字符串、官网提及的双引号字体栈），仍未排查出问题所在。

现有配置代码 #

Tailwind配置

module.exports = {
  content: [
    './components/**/*.{js,vue,ts}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
  ],
  theme: {
    fontFamily: {
      roboto: ['Roboto', 'sans'],
      source: ['Source Serif Pro', 'serif'],
    },
    extend: {
      colors: {
        gray: {
          50: '#f4f4f4',
          100: '#000029',
          200: '#bebebe',
          300: '#555555',
          400: '#444444',
          500: '#3e3e3e',
        },
        tan: {
          400: '#d1b991',
          500: '#caae7f',
        },
        green: {
          400: '#008059',
          500: '#006846',
        },
      },
    },
  },
};

Nuxt配置（build modules内）

[
  '@nuxtjs/google-fonts',
  {
    families: {
      Roboto: {
        wght: [400, 700],
      },
      'Source+Serif+Pro': {
        wght: [400, 600],
      },
    },
    subsets: ['latin'],
    display: 'swap',
    prefetch: false,
    preconnect: false,
    preload: false,
    download: true,
    base64: false,
  },
],

• 强制字体名称解析
  带空格的字体名称在CSS中需要用引号包裹，修改Tailwind配置中的字体栈：

  fontFamily: {
    roboto: ['Roboto', 'sans'],
    source: ['"Source Serif Pro"', 'serif'],
  },
  

• 检查本地字体文件是否存在
  查看项目assets/fonts目录，确认Source Serif Pro的字体文件（如.woff2）已被正确下载。如果缺失，执行npx nuxt clean清除缓存后重启项目，或重新安装依赖。

• 验证CSS注入是否正常
  在浏览器开发者工具中搜索font-family: "Source Serif Pro"，确认对应的@font-face声明已生成且路径正确。

• 确认字体类已正确应用
  确保Vue组件中使用了font-source类，比如：

  <p class="font-source">测试Source Serif Pro字体显示</p>
  

  若被其他样式覆盖，可临时添加!important测试优先级：

  <p class="font-source !font-source">测试Source Serif Pro字体显示</p>
  

• 调整Google Fonts模块配置
  尝试开启preload选项确保字体优先加载，或暂时关闭download改为在线加载排除本地下载问题：

  {
    // ...其他配置
    preload: true,
    download: false,
  }
  

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