WordPress自定义主题引入Google Fonts后部分设备无法加载求助

• 检查CSS字体族声明是否正确
  确认所有需要应用Poppins字体的样式规则中，字体族拼写正确、格式合规，示例如下：

  font-family: 'Poppins', sans-serif;
  

  同时检查是否引用了未加载的字重，你当前仅加载了400、500、700三个字重，若样式中使用了其他字重也会导致字体不生效。
• 排查缓存问题
  本地调试生效但其他设备不生效大概率为缓存导致，按优先级依次清除以下缓存：
  1. 访问设备的浏览器缓存
  2. WordPress站点安装的缓存插件缓存
  3. 站点接入的CDN节点缓存
  4. 服务器层面的静态资源缓存
• 修复样式加载的兼容性与规范问题
  部分旧版浏览器不支持rel="preload stylesheet"的合并写法，建议拆分为两个独立标签：

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="preload" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap" as="style">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap">
  

  更符合WordPress开发规范的方式是不要硬编码到head.php，而是通过functions.php入队加载样式：

  function custom_enqueue_google_fonts() {
      wp_enqueue_style( 'google-fonts-poppins', 'https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap', array(), null );
  }
  add_action( 'wp_enqueue_scripts', 'custom_enqueue_google_fonts' );
  

• 检查样式优先级覆盖问题
  在异常设备上打开浏览器开发者工具，选中未生效的文本元素，查看计算属性栏的font-family取值，确认是否被其他更高优先级的CSS规则覆盖了字体设置。
• 排查网络访问限制问题
  若你的站点面向国内用户，部分网络环境无法正常访问Google字体服务，可替换为国内可用的Google字体镜像源解决。

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