React项目引入Google Fonts不生效的问题咨询

一、字体引入环节排查 #

• 检查index.html中Google Fonts链接的正确性，确认family参数拼写与目标字体完全一致，Great Vibes的标准引入代码为：

<link href="https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap" rel="stylesheet">

• 确认引入的字体包含你实际使用的字重：Great Vibes默认仅提供400字重，若CSS中设置了font-weight: 500/700等非支持字重，会导致字体 fallback 到默认字体
• 打开浏览器控制台Network面板，检查Google Fonts的CSS文件、字体文件（.woff2后缀）是否加载成功，若出现加载失败/被拦截的情况，可替换为国内可访问的Google Fonts镜像源

二、CSS样式书写环节排查 #

• 检查字体名书写是否正确：带空格的字体名必须加引号，正确写法为font-family: 'Great Vibes', cursive;，避免出现无引号、拼写错误、漏写空格的问题
• 检查样式优先级：打开浏览器元素面板的「Computed」标签，查看目标元素的最终font-family属性值，若Great Vibes被划掉说明被更高优先级的样式覆盖，可通过提高选择器权重、添加!important测试验证
• 确认样式作用范围正确：button、a、input等内置元素默认不会继承父级字体，需要单独为这类元素设置字体规则

三、React项目配置排查 #

• 若使用CSS Modules，确认字体规则所在的类名已正确绑定到目标元素上
• 检查全局重置样式（reset.css/normalize.css）、UI组件库的默认字体规则是否覆盖了你的自定义字体配置
• 若使用SSR框架（如Next.js、Gatsby），确认字体链接是添加到框架指定的Head组件中，而非直接修改静态HTML导致的 hydration 异常
• 若使用Sass/Less等预处理器，确认没有变量覆盖、作用域嵌套错误导致字体规则未生效

四、其他通用排查项 #

• 强制刷新（Ctrl/Command+Shift+R）清理浏览器缓存，或使用隐私模式访问排查本地缓存问题
• 检查是否有广告拦截、隐私类浏览器扩展拦截了字体文件的加载请求

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