React引入Google Font桌面正常移动端显示默认字体如何解决

你代码里的字重配置非法，是导致移动端字体失效的首要原因：

• CSS标准中font-weight的合法取值范围为1-1000，你全局样式里写的3000完全超出规范允许范围
• 你在Google Fonts引入链接里也配置了wght@3000，而Turret Road字体本身仅提供200/300/400/500/700/800共6种合法字重，根本不存在3000对应的字体资源。桌面端浏览器容错性较强，会自动匹配最接近的可用字重渲染，移动端浏览器（尤其是iOS Safari、安卓系统内置浏览器）对非法CSS值容错度低，会直接判定字体匹配失败，回退渲染系统默认字体。
• 你贴的代码里字体链接用了HTML转义字符&连接参数，在CSS文件中这类转义字符无法被正常解析，会导致部分浏览器拉取字体资源时参数识别错误。

1. 修正CSS顶部的字体引入规则，将字重改为实际需要的合法值，参数直接用&连接，不要用HTML转义字符，比如要使用细字重就配置为300：

@import url("https://fonts.googleapis.com/css2?family=Turret+Road:wght@300&display=swap");

2. 修正全局通配符样式里的字重配置，和引入的字重保持一致，同时在字体族末尾添加通用兜底字体，避免资源加载失败时排版错乱：

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Turret Road", sans-serif !important;
  font-weight: 300;
  font-style: normal;
}

如果修正字重后仍有问题，按以下顺序排查：

• 确认@import规则写在CSS文件的最顶部，前面不能有任何其他CSS声明，否则部分移动端浏览器会直接忽略该引入规则
• 检查移动端网络环境：部分地区的移动网络无法正常拉取Google Fonts资源，会导致字体加载失败，这种情况可以把字体文件下载到项目本地，通过@font-face规则自行引入，不依赖远程资源
• 排查CSS优先级冲突：用浏览器远程调试工具选中渲染异常的元素，查看Computed面板中实际生效的font-family值，确认是否有组件级样式覆盖了全局字体配置
• 尽量不要用通配符选择器+!important强制全局生效字体：部分移动端第三方组件（输入框、弹窗等）自带字体配置，强制覆盖可能导致组件渲染异常，更稳妥的方式是给根节点、body标签设置字体，让子元素默认继承。

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