字体加载常见错误

• 缺少 display=swap 会导致文字在字体加载完成前不可见——务必在 URL 中添加该参数
• 仅加载实际使用的字重：例如使用 wght@400;600;700，而非整个字体家族；每个未使用的字重约浪费 20KB
• 缺少 preconnect 会拖慢加载速度——需同时添加： 和

可变字体（Variable Fonts）

• Inter、Roboto Flex、Montserrat、Open Sans 均提供可变字体版本——单个文件即可涵盖全部字重
• 使用 wght@100..900 语法调用可变字体——仅下载一个文件，而非多个静态字重文件
• CSS 中启用可变字体：任意在范围内的值（如 font-weight: 450）均可生效
• 请查看字体详情页上的 “Variable” 标识——并非所有 Google Fonts 都支持可变字体

子集化（Subsetting）

• 默认已包含 latin 字符集——仅当需要波兰语、越南语等语言时，才额外添加 &subset=latin-ext
• CJK 字体（如 Noto Sans JP 等）体积庞大——Google 虽对其做了分片处理，但仍较重
• 未使用的字符子集 = 浪费的字节数——请确认实际所需字符范围

经过验证的字体组合方案

衬线体 + 无衬线体（经典对比）：

• Playfair Display（标题） + Source Sans Pro（正文）
• Lora（标题） + Roboto（正文）
• Libre Baskerville（标题） + Montserrat（正文）
• Merriweather（标题） + Open Sans（正文）

纯无衬线体（现代/简洁风格）：

• Inter（标题与正文均使用）——通过字重变化构建视觉层级
• Montserrat（标题） + Hind（正文）
• Poppins（标题） + Nunito（正文）
• Work Sans（标题） + Open Sans（正文）

科技/初创公司风格：

• Space Grotesk（标题） + Space Mono（代码）
• DM Sans（标题） + DM Mono（代码）
• IBM Plex Sans + IBM Plex Mono

展示类字体（仅限标题）：

• Abril Fatface、Bebas Neue、Oswald——切勿用于正文文本

按用途选择字体

• 长文阅读： Merriweather、Lora、Source Serif Pro、Crimson Text
• 用户界面 / 交互组件： Inter、Roboto、Open Sans、Nunito Sans（具有较高 x-height，在小字号下依然清晰易读）
• 强视觉冲击力的标题： Playfair Display、Oswald、Bebas Neue（不可用于正文）
• 等宽字体（Monospace）： JetBrains Mono、Fira Code、Source Code Pro

常见误用

• 为“保险起见”加载 6 种以上字重——应精准选用实际需要的字重（通常为 2–3 种）
• 将展示类字体用于段落文本——如 Lobster、Pacifico、Abril Fatface 等仅适用于标题
• 所选两种字体过于相似——例如 Roboto 与 Open Sans 视觉差异极小；建议仅选用其一
• CSS 中缺失对应字重声明——若仅加载了 400 和 700 字重，则 font-weight: 600 将无法生效
• 未设置字体回退栈（fallback stack）——始终采用类似格式：font-family: 'Inter', system-ui, sans-serif

自主托管（Self-Hosting）

• 为满足 GDPR 合规要求建议自主托管——Google Fonts 从 Google 服务器加载，会记录用户 IP 地址
• 可使用 google-webfonts-helper 工具下载字体文件
• 自主托管时，@font-face 中仍需声明相同的 font-display: swap
• 若您的 CDN 节点地理位置比 Google 的更近，自主托管反而可能获得更快的加载速度