Nuxt的nuxt.config.js内联字体声明不生效，如何符合web.dev加载规范？

云上老周

2026-10-3

Nuxt 内联字体配置不生效修复方案

现有配置的问题点

@font-face 语法错误：@font-face 规则的font-family属性仅用于定义当前自定义字体的名称，不能直接写入 fallback 字体队列，你将系统回退字体写在这里属于无效语法，会导致整条规则失效。
冗余规则冲突：你已经引入了 Google Fonts 的 Inter 字体样式表，该外部 CSS 已经自动完成了所有@font-face规则的定义，不需要手动重复编写，错误的冗余定义反而会覆盖正常规则。
转义错误：你写的"属于 HTML 转义字符，在 nuxt.config.js 的cssText字段中不需要转义，直接使用引号嵌套即可，错误转义也会导致规则不被浏览器识别。
资源提示冗余：fonts.gstatic.com同时配置了dns-prefetch和preconnect，preconnect优先级更高、功能更全，重复配置属于无效冗余。
拼写错误：回退字体中的Segou UI为拼写错误，正确写法是Segoe UI，该错误会导致 Windows 系统下回退字体加载异常。

正确配置示例

// nuxt.config.js 中 head 字段的完整配置
export default {
  head: {
    link: [
      { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
      {
        rel: 'preconnect',
        href: 'https://fonts.gstatic.com',
        crossorigin: 'anonymous',
      },
      {
        rel: 'stylesheet',
        href: 'https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;700&subset=latin&display=swap',
      },
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' },
    ],
    style: [
      {
        cssText: 'body { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif }',
        type: 'text/css',
      }
    ]
  }
}