最稳妥的 Google Fonts 加载方式是使用 <link rel="stylesheet"> 并带 &display=swap 参数，确保 FOUT 体验、精简字重、正确转义 URL 中的 &，中文项目建议本地托管。
直接用 <link> 标签引入 Google Fonts 是最稳妥、浏览器支持最好、加载时机最早的方式。只要 URL 正确、rel="stylesheet" 不漏、display=swap 加上，字体基本不会白屏或失效。
必须从 fonts.google.com 复制完整 link，别手敲 URL
Google Fonts 的 URL 有严格格式：必须含 css2 路径、URL 编码后的 family 参数（比如 Roboto:wght@400;700）、以及 &display=swap。手动拼错一个字符（比如写成 css 而非 css2，或漏掉 & 实体）就会 404。
- 打开 fonts.google.com，选中需要的字体和字重（如 Inter 的 400 和 600）
- 点右下角「Embed」→ 切到「」标签页 → 复制整行代码
- 粘贴到 HTML 的
<head>中，位置在任何 CSS 之前（包括<style>或外链<link rel="stylesheet">） - 确认复制内容里有
rel="stylesheet"—— 漏掉这个属性，浏览器根本不会解析字体规则
font-family 声明必须加引号，且大小写/空格要完全一致
Google Fonts 返回的字体名是原始命名，比如 Source Code Pro 含空格和大写，Fira Code 中间有空格。CSS 解析器会把没引号的 font-family: Source Code Pro 当成三个独立字体名 Source、Code、Pro，最终回退到系统默认字体。
- 正确写法：
font-family: 'Source Code Pro', monospace;或font-family: "Fira Code", monospace; - 错误写法：
font-family: Source Code Pro, monospace;（无引号） - 检查 DevTools 的 Computed 面板里
font-family是否显示为你写的字体名；如果显示sans-serif或serif，大概率是引号或拼写问题 - 中文字体慎用 Google Fonts：简体中文子集（
zh-CN）常缺失或渲染异常，建议本地托管思源黑体等开源字体
display=swap 不是可选项，而是防 FOIT 的底线配置
不加 &display=swap，浏览器默认等待字体加载完成才渲染文本，导致首屏长时间空白（FOIT）。加了之后，先用系统字体渲染，字体就绪再替换（FOUT），用户至少能读到内容。
立即学习“前端免费学习笔记（深入）”；
-
&display=swap必须出现在 URL 末尾，且&是 HTML 实体，不能写成& - 旧式 URL 如
https://fonts.googleapis.com/css?family=Roboto已淘汰，不支持display参数，也不支持精简字重 - 如果项目只用常规体（400）和粗体（700），就只写
family=Roboto:wght@400;700；别写family=Roboto，否则拉取全部变体 + 所有语言子集，浪费带宽 - 多个字体用
|分隔，如family=Inter|Fira+Code，注意加号+是空格的编码，不是字面加号
真正容易被忽略的不是“怎么加”，而是“加得够不够干净”：URL 是否精简、引号是否包裹、display=swap 是否生效、中文是否 fallback 到本地字体——这些细节错一点，字体就只是看着配置成功，实际却没加载或渲染异常。
