Gatsby从v2升级至v3后跳转页面Google Fonts加载异常问题求助

1. 验证 styled-components 插件SSR配置 #

• 确认gatsby-config.js中gatsby-plugin-styled-components的配置项是否开启ssr: true，Gatsby v3对SSR阶段的样式注入逻辑有调整，未开启该配置会导致客户端路由跳转时，SSR阶段注入的全局样式（包括字体声明）丢失
• 检查是否存在多个样式处理插件冲突，比如同时使用了其他全局样式注入插件、字体加载插件，和styled-components的注入逻辑产生覆盖

2. 检查Google字体声明的作用域 #

• 确认@font-face字体声明是否定义在全局样式中（通过createGlobalStyle创建并挂载到根组件），如果字体声明仅写在首页独有的组件/样式中，跳转至其他页面时该样式随组件卸载被移除，就会出现字体丢失的情况
• 排查gatsby-browser.js和gatsby-ssr.js的全局样式注入逻辑，确认两个文件的全局样式配置保持一致，避免客户端和SSR端的样式差量

3. 竞态条件排查 #

• 打开浏览器开发者工具的网络面板，过滤font类型请求，对比首次加载和路由跳转后的请求差异：
  • 若跳转后无字体请求，说明跳转时@font-face声明未被正确注入到页面中
  • 若跳转后有字体请求但未生效，检查样式优先级，是否有内联样式、其他全局样式覆盖了字体设置
• 查看元素面板<head>中的<style>标签，对比刷新页和跳转页的样式差异，确认styled-components生成的字体声明是否存在

4. 临时验证方案 #

你可以先将字体声明统一放到全局样式中，强制所有页面加载字体规则，验证是否是作用域问题导致的异常。

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