Google Fonts可变字体Inter在Windows浏览器无法生效问题咨询

• 你当前使用的Google Fonts引入链接仅加载了固定400字重的静态Inter字体，生成的@font-face规则中字体族名为Inter，不包含可变字体所需的字重轴定义
• macOS环境通常预装了名为Inter var的本地可变字体，页面声明font-family: Inter var时可以匹配到本地字体，因此表现正常；Windows系统无该预装字体，无法匹配到对应字体资源，直接触发系统字体 fallback
• 手动将字体声明改为Inter后，仅能匹配到加载的静态400字重字体，缺少可变字重轴信息，因此可变字体特性无法生效，文字呈现偏细的效果

方案1：调整Google Fonts引入配置（CDN方式） #

• 替换原有head中的字体引入链接，指定可变字重范围：

<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=Inter:wght@100..900&display=swap" rel="stylesheet" />

• 修改Tailwind配置，对齐字体族名称：

theme: {
    extend: {
        fontFamily: {
            sans: ['Inter', ...defaultTheme.fontFamily.sans],
        },
    },
},

方案2：使用Next.js内置next/font方案（更适配Next.js生态） #

Next.js 13及以上版本内置了字体优化能力，不需要手动配置head链接，直接在项目中引入即可避免兼容性问题：

1. 在app/layout.js（App Router）或_app.js（Pages Router）中引入Inter可变字体：

import { Inter } from 'next/font/google'

const inter = Inter({
  subsets: ['latin'],
  variable: '--font-inter',
})

2. 将字体变量挂载到根节点：

// App Router 示例
export default function RootLayout({ children }) {
  return (
    <html lang="en" className={`${inter.variable}`}>
      <body>{children}</body>
    </html>
  )
}

3. 修改Tailwind配置关联字体变量：

theme: {
    extend: {
        fontFamily: {
            sans: ['var(--font-inter)', ...defaultTheme.fontFamily.sans],
        },
    },
},

该方案会自动托管字体文件，避免跨浏览器兼容性问题，同时消除字体加载闪烁。

内容的提问来源于stack exchange，提问作者T. Maxx