Google Fonts中Nunito与Nunito Sans共用URL及字体名致显示异常求助

针对本地显示Nunito Sans但服务器端显示Nunito的问题，以下是可行的解决步骤：

• 强制字体优先级，避免错误回退
  浏览器可能因加载顺序或本地字体存在，优先使用系统预装的Nunito。在CSS中明确强制使用Nunito Sans，并配置字体加载策略：

  @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@600;700&display=swap');
  
  /* 全局强制应用Nunito Sans */
  * {
    font-family: 'Nunito Sans', sans-serif !important;
    font-display: swap; /* 确保字体加载完成后替换占位 */
  }
  

  !important用于覆盖页面中可能存在的其他字体规则，font-display: swap避免因字体加载延迟导致浏览器 fallback 到错误字体。

• 刷新服务器与CDN缓存
  服务器或CDN可能缓存了旧的字体资源配置，导致实际加载的不是Nunito Sans的规则：

  • 清除服务器（如Nginx、Apache）的静态资源缓存
  • 若使用CDN，同步清除CDN缓存
  • 给字体请求URL添加版本参数，强制浏览器和服务器拉取最新资源：

    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@600;700&display=swap?v=1.1">
    

• 排查服务器端系统字体干扰
  部分服务器环境可能预装了Nunito系统字体，浏览器会优先使用本地字体而非Web字体。解决方式：

  • 在CSS中明确区分两款字体的优先级，确保Nunito Sans排在最前：

    font-family: 'Nunito Sans', 'Nunito', sans-serif;
    

  • 或者使用字体的完整PostScript名称（可在Google Fonts字体详情中获取），彻底避免名称混淆。

• 验证字体加载状态
  在服务器端浏览器的开发者工具中，进入「Network > Fonts」面板，检查实际加载的字体文件是否为Nunito Sans的woff2资源。若加载错误，需确认服务器是否能正常访问Google Fonts资源（如是否有防火墙拦截）。

内容的提问来源于stack exchange，提问作者Sandeep C. Nath