在CSS引入Space Grotesk字体遇Edge追踪拦截及CORB错误求助

你遇到的问题核心是用错了Google Fonts的导入链接——你当前使用的是字体的浏览器展示页面URL，而非官方提供的CSS样式表链接，这才是导致追踪防护拦截和CORB错误的根本原因，和浏览器设置无关。

正确的字体导入方式 #

方法1：CSS @import 替换 #

把你当前的错误代码替换为官方提供的@import代码：

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap');

替换后即可在CSS中正常调用字体：

/* 示例：给body设置该字体 */
body {
  font-family: 'Space Grotesk', sans-serif;
}

方法2：HTML link 标签（推荐） #

在HTML的<head>标签内添加以下代码，这种方式比@import的加载性能更好：

<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=Space+Grotesk:wght@300..700&display=swap" rel="stylesheet">

错误原因说明 #

• https://fonts.google.com/specimen/Space+Grotesk是Google Fonts的字体展示页面，返回的是HTML内容，不是CSS样式表，浏览器不允许CSS跨源加载HTML资源，因此触发CORB拦截。
• 该展示页面包含追踪类脚本，所以会被Edge的追踪防护拦截存储访问请求。

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