如何解决macOS端Chrome/Safari中@font-face加载Baloo 2字体失效问题

当前写法存在两个核心错误，直接导致Mac端Chrome、Safari无法正确加载Baloo 2字体：

• @font-face规则的font-family字段仅可填写单个自定义字体名称，把回退值cursive写入该字段后，浏览器会把'Baloo 2', cursive整体识别为一个字体名，完全无法匹配到目标字体
• @font-face的src字段只接受字体文件资源路径，填入谷歌字体的CSS样式文件地址后，浏览器无法从这个路径解析到实际的字体文件，最终直接触发回退逻辑，显示系统默认cursive字体。

1. 移除错误的自定义@font-face块 #

不需要自己手写@font-face规则套谷歌字体的CSS地址，直接选择以下任意一种方式引入字体资源即可：

• 方式一（推荐）：在页面HTML的<head>标签最前部（优先于所有自定义样式加载）加入字体引入标签，提前做域名预连接提升加载速度，代码如下：

<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=Baloo+2:wght@400;500;600;700;800&display=swap" rel="stylesheet">

• 方式二：如果要在SCSS文件内引入，直接在font.scss的最顶部（不要嵌套在任何规则块内）用@import引入，不要套在@font-face里：

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&display=swap');

2. 修正字体配置 #

variable.scss里的字体变量保持原有写法即可，回退字体cursive只需要写在字体调用的栈里，不要写入@font-face的font-family字段：

$font-Baloo:'Baloo 2', cursive;

如果你需要自托管本地字体文件而非使用在线字体，正确的@font-face写法参考如下（font-family仅填字体名，src指向实际的woff2/woff字体文件，多字重需分别声明）：

@font-face {
  font-family: 'Baloo 2';
  src: url('/your-local-font-path/Baloo2-Regular.woff2') format('woff2'),
       url('/your-local-font-path/Baloo2-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

3. Mac端浏览器兼容适配 #

• 给应用字体的元素添加font-smooth: always;属性，规避Mac端浏览器字体渲染拦截问题
• 检查浏览器设置：Safari需关闭「偏好设置-高级-辅助功能」下的强制字体替换选项，Chrome需关闭「设置-外观」下的自定义字体强制覆盖选项
• 所有字体相关规则都配置font-display: swap，避免字体加载超时被浏览器直接替换为默认字体
• 修复完成后按Cmd+Shift+R强刷页面，清除旧的错误样式缓存

打开浏览器开发者工具，在Network面板筛选Font类资源，确认Baloo 2字体资源加载状态为200；再切换到Elements面板的Computed标签，查看目标元素的最终渲染字体列表包含Baloo 2，即表示配置生效，不会再回退到默认cursive字体。

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