如何让Google Fonts在移动设备上正常显示？

问题修复方案 #

你的Google Fonts引入代码存在语法错误，末尾rel="stylesheet缺少闭合的双引号，这是移动端无法正常加载字体的常见原因，修正后的代码如下：

<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=Courgette&family=Poppins:wght@300&display=swap" rel="stylesheet">

如果修正后依然存在显示问题，按以下顺序排查：

• 检查CSS中的字体族声明是否规范，必须包含对应字体名称和通用后备字体，示例写法：

  /* Poppins字体声明 */
  body {
    font-family: 'Poppins', sans-serif;
  }
  /* Courgette字体声明 */
  .title {
    font-family: 'Courgette', cursive;
  }
  

• 排查移动端专属CSS规则，确认没有媒体查询、高优先级选择器覆盖了字体设置
• 清理移动端浏览器缓存后使用隐私模式测试，排除旧的错误资源缓存影响
• 若存在Google Fonts访问受限的情况，可将字体资源下载到本地项目中部署，避免第三方资源加载失败

内容的提问来源于stack exchange，提问作者Mani Deepak Telaprolu