如何解决Mac及移动端Safari无法正确显示Google Fonts的问题？

我之前在Safari上也踩过类似的字体加载坑，结合你试过的方法和给出的代码，给你几个针对性的解决方案：

1. 统一HTTPS协议，修复混合内容问题 #

你用<link>标签引入时用了http协议，但现在Google Fonts强制要求HTTPS，Safari会严格拦截混合内容（HTTP资源在HTTPS页面加载），这大概率是核心问题之一。同时要注意字体字重和你CSS里的使用保持一致：

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oswald:300,500,700' rel='stylesheet' type='text/css'>

（之前你写的Oswald字重是300,400,700，但CSS里用了500，字重不匹配会导致Safari直接 fallback 到系统字体）

2. 优化@import写法（如果继续使用该方式） #

Safari对@import的位置要求很严格，必须放在所有CSS规则的最顶部，同时给字体声明加上系统字体 fallback：

/* 必须放在所有CSS规则之前 */
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;500;700&display=swap');

body {
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
  color: #6b6a6a;
  font-family: 'Oswald', sans-serif !important; /* 加上sans-serif作为兜底 */
  text-transform: uppercase;
  background:#202020;
  background-size: contain;
  display:none; /* 注意这个属性会让元素初始隐藏，确认是否是业务需要 */
  overflow:hidden;
  overflow-y:scroll;
}

.text_widget {
  font-family: 'Lato', sans-serif !important; /* 同样加上兜底字体 */
  font-weight: 400;
  text-transform: none;
  margin-top: 40px;
}

3. 本地WOFF2字体的Safari兼容处理 #

如果你选择本地嵌入字体，要确保@font-face的写法完全符合Safari的要求：

@font-face {
  font-family: 'Oswald';
  font-weight: 300;
  font-style: normal;
  src: url('path/to/oswald-light.woff2') format('woff2');
  font-display: swap; /* 关键：让Safari先显示兜底字体，等目标字体加载完再替换 */
}

@font-face {
  font-family: 'Oswald';
  font-weight: 500;
  font-style: normal;
  src: url('path/to/oswald-medium.woff2') format('woff2');
  font-display: swap;
}

/* 其他字重同理，每个字重单独声明 */

• 必须给每个字重单独写@font-face，不能合并声明
• 确保字体文件是从Google Fonts下载的原始WOFF2文件，避免转码出错
• font-display: swap是Safari 14.1+支持的属性，能解决字体加载延迟导致的空白问题

4. 排查Safari隐私设置与缓存 #

• 关闭Safari的「阻止跨站跟踪」和「内容阻止器」，这些隐私设置可能会拦截Google Fonts的资源
• 清除Safari缓存：Mac上按Cmd+Opt+E，移动端进入「设置→Safari→清除历史记录与网站数据」
• 用隐私模式打开页面测试，排除浏览器扩展和缓存的干扰

5. 检查display:none的影响 #

你的body设置了display:none，如果字体加载完成前元素一直处于隐藏状态，Safari可能不会触发字体渲染逻辑。如果这不是业务必须的初始化逻辑，可以改成visibility:hidden，或者用JS控制显示时机，确保字体有机会完成加载。

内容的提问来源于stack exchange，提问作者Michael Nielsen