Firefox无法加载Google导入的Cardo字体？技术排查求助

问题原因分析 #

• Firefox 115.7.0esr属于较旧的ESR版本，Google Fonts的@import链接会根据浏览器UA自动返回适配的字体格式，但部分旧ESR版本可能无法被正确识别，导致返回的字体格式不被支持，最终无法加载Cardo字体。
• 从FontFinder的结果来看，浏览器未识别到Cardo字体，因此触发字体 fallback 机制，使用了系统默认的serif字体，而斜体是系统默认serif字体的默认样式（如果你的文本本身带有<em>或font-style: italic标记，系统字体就会显示斜体）。
• 另外需检查@import规则的位置：Firefox对@import的位置要求严格，必须放在所有CSS规则、媒体查询之前，若放在其他块内会直接失效。

是否需要添加WOFF字体格式？ #

不需要额外手动添加，但可以通过手动声明@font-face并指定WOFF/WOFF2格式来提升兼容性，因为WOFF/WOFF2是目前所有现代浏览器（包括旧ESR版本）都支持的字体格式。

解决配置方案 #

方案1：修正@import的使用方式 #

1. 确保@import放在CSS文件的最开头，不能嵌套在任何选择器或媒体查询内：

   /* 必须放在最顶部 */
   @import url('https://fonts.googleapis.com/css2?family=Cardo&family=Libre+Caslon+Display&display=swap');
   
   body {
       font-family: 'Cardo','Baskerville', serif;
       /* 其他样式 */
   }
   

2. 若仍无效，可在Google Fonts链接中强制指定字体格式：

   @import url('https://fonts.googleapis.com/css2?family=Cardo&family=Libre+Caslon+Display&display=swap&format=woff2');
   

方案2：手动使用@font-face声明字体（最可靠） #

直接从Google Fonts获取Cardo字体的WOFF/WOFF2资源，手动声明字体，避免浏览器UA识别问题：

/* 声明Cardo常规体 */
@font-face {
    font-family: 'Cardo';
    font-style: normal;
    font-weight: 400;
    src: url('https://fonts.gstatic.com/s/cardo/v19/wlp_gwjKBV1pqhv97I0xKA.woff2') format('woff2'),
         url('https://fonts.gstatic.com/s/cardo/v19/wlp_gwjKBV1pqhv97I0xKA.woff') format('woff');
}

/* 声明Cardo斜体（如果需要） */
@font-face {
    font-family: 'Cardo';
    font-style: italic;
    font-weight: 400;
    src: url('https://fonts.gstatic.com/s/cardo/v19/wlq_gwjKBV1pqhv97IE3t6Tpow.woff2') format('woff2'),
         url('https://fonts.gstatic.com/s/cardo/v19/wlq_gwjKBV1pqhv97IE3t6Tpow.woff') format('woff');
}

/* 字体族设置 */
body {
    font-family: 'Cardo','Baskerville', serif;
    /* 其他样式 */
}

注：上述资源URL可从Google Fonts的@import链接返回的CSS中提取，确保资源路径有效。

验证方法 #

在Firefox开发者工具的「网络」面板中，检查字体资源的请求状态：若返回200，则字体加载成功；若返回404，需检查资源URL是否正确。

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