SCSS使用Google Fonts失效：main.css已编译font-family但站点加载不生效

你可以按以下优先级依次排查问题：

• 浏览器/本地服务器缓存问题
  这是该场景下最高发的原因，本地编译更新了css文件后，浏览器或者本地服务器仍然返回缓存的旧版本main.css。可以通过强制刷新（Windows按Ctrl+F5，Mac按Shift+Cmd+R）、清空浏览器缓存验证，如果问题解决可以给css文件名添加哈希后缀（如main.[哈希值].css）从根本上避免缓存问题。
• 编译输出路径与服务器托管路径不匹配
  确认你的SCSS编译工具（sass、vite、webpack、gulp等）配置的css输出路径，和本地服务器托管的静态资源目录下的css路径是否一致。常见的错误是编译输出的文件保存在src/css目录，但服务器实际读取的是dist/css目录下的旧文件，导致你本地看到的编译后文件和服务器加载的不是同一份。
• CSS优化插件误删规则
  如果你的构建流程中用到了purgecss、cssnano这类CSS清理/压缩插件，可能会出现规则误删的情况：purgecss会误判你写font-family属性对应的选择器未在页面中使用，直接将整段CSS规则移除。你可以临时关闭所有CSS优化插件重新打包编译，如果服务器加载的css恢复了font-family属性，就需要给对应选择器添加purgecss白名单配置。
• 重复引入资源冲突
  你同时在HTML和SCSS中引入了Google Fonts资源，部分构建工具的tree shaking逻辑可能会判定重复样式为冗余内容，将你自定义的font-family规则清理掉。可以暂时注释掉其中一处引入（推荐保留HTML的link标签引入，性能更优）重新编译验证。

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