Loading Mistakes
- - Missing
display=swap causes invisible text until font loads—always add it to URL - Load only weights you use:
wght@400;600;700 not the entire family—each unused weight wastes ~20KB - Missing preconnect slows load—add both:
<link rel="preconnect" href="https://fonts.googleapis.com"> and INLINECODE3
Variable Fonts
- - Inter, Roboto Flex, Montserrat, Open Sans have variable versions—one file for all weights
- Use
wght@100..900 syntax for variable—downloads single file instead of multiple - CSS for variable:
font-weight: 450 works with any value in range - Check "Variable" badge on font page—not all Google Fonts are variable
Subsetting
- - Default includes latin—only add
&subset=latin-ext if you need Polish, Vietnamese, etc. - CJK fonts (Noto Sans JP, etc.) are huge—Google serves them sliced, but still heavy
- Unused subsets = wasted bytes—check what characters you actually need
Proven Pairings
Serif + Sans-Serif (classic contrast):
- - Playfair Display (heading) + Source Sans Pro (body)
- Lora (heading) + Roboto (body)
- Libre Baskerville (heading) + Montserrat (body)
- Merriweather (heading) + Open Sans (body)
Sans-Serif only (modern/clean):
- - Inter (both)—vary weight for hierarchy
- Montserrat (heading) + Hind (body)
- Poppins (heading) + Nunito (body)
- Work Sans (heading) + Open Sans (body)
Tech/Startup:
- - Space Grotesk (heading) + Space Mono (code)
- DM Sans (heading) + DM Mono (code)
- IBM Plex Sans + IBM Plex Mono
Display fonts (headings only):
- - Abril Fatface, Bebas Neue, Oswald—never use these for body text
Font Selection by Purpose
- - Long-form reading: Merriweather, Lora, Source Serif Pro, Crimson Text
- UI/Interfaces: Inter, Roboto, Open Sans, Nunito Sans (tall x-height, clear at small sizes)
- Impact headings: Playfair Display, Oswald, Bebas Neue (not for body)
- Monospace: JetBrains Mono, Fira Code, Source Code Pro
Common Mistakes
- - Loading 6+ weights "to be safe"—pick exactly the weights you use (usually 2-3)
- Using display fonts for paragraphs—Lobster, Pacifico, Abril Fatface are heading-only
- Two fonts too similar—Roboto + Open Sans look almost identical; just use one
- Missing font-weight in CSS—
font-weight: 600 won't work if you only loaded 400 and 700 - No fallback stack—always: INLINECODE8
Self-Hosting
- - Self-host for GDPR compliance—Google Fonts loads from Google servers, logs IP addresses
- Use google-webfonts-helper to download files
- Same
font-display: swap needed in your @font-face - Self-hosted can be faster if your CDN is closer than Google's
加载错误
- - 缺少 display=swap 会导致字体加载前文字不可见——务必将其添加到 URL 中
- 仅加载你使用的字重：wght@400;600;700，而非整个字族——每个未使用的字重会浪费约 20KB
- 缺少预连接会拖慢加载速度——请添加以下两项： 和
可变字体
- - Inter、Roboto Flex、Montserrat、Open Sans 均有可变版本——一个文件包含所有字重
- 使用 wght@100..900 语法加载可变字体——仅下载单个文件而非多个
- 可变字体的 CSS：font-weight: 450 可适用于范围内的任意数值
- 查看字体页面上的可变徽章——并非所有 Google Fonts 都是可变字体
子集化
- - 默认包含拉丁字符集——仅在你需要波兰语、越南语等语言时添加 &subset=latin-ext
- 中日韩字体（如 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（不用于正文）
- 等宽字体： JetBrains Mono、Fira Code、Source Code Pro
常见错误
- - 加载 6 个以上字重以防万一——只选择你实际使用的字重（通常 2-3 个）
- 将展示字体用于段落——Lobster、Pacifico、Abril Fatface 仅限标题使用
- 两种字体过于相似——Roboto 和 Open Sans 几乎一模一样；只用一个即可
- CSS 中缺少字重声明——如果你只加载了 400 和 700，font-weight: 600 将不起作用
- 缺少后备字体栈——始终使用：font-family: Inter, system-ui, sans-serif
自托管
- - 为符合 GDPR 要求而自托管——Google Fonts 从 Google 服务器加载，会记录 IP 地址
- 使用 google-webfonts-helper 下载文件
- 在你的 @font-face 中同样需要 font-display: swap
- 如果你的 CDN 比 Google 的服务器更近，自托管可能更快
