如何用 google webfonts helper 自托管 Google Fonts 并生成 @font-face CSS

更新时间

在 google webfonts helper（gwfh.mranftl.com）中搜索字体、勾选需要的字重，下载包含 eot、ttf、svg、woff、woff2 的字体包，再把工具生成的 @font-face CSS 复制到自己的样式表，把 src 里的路径改成字体文件实际所在目录，即可让网页从自己的域名加载字体，不再请求 Google 服务器。适用前提是：你拥有网站文件的写入权限，并且所选字体允许自托管（Google Fonts 上的字体通常为开源授权，但商用前仍应核对具体字体的许可条款）。

操作步骤

1. 选择字体与字重

打开 gwfh.mranftl.com，在搜索框中输入字体名称（如 Roboto、Noto Sans SC），从结果中选中目标字体。然后勾选实际用到的字重和样式，例如 regular 400、bold 700、italic 400。只勾选页面真正会用到的组合，每多一个文件就多一次请求和一份体积。

2. 下载字体包

确认选择后下载工具打包的 zip。解压后应能看到同一字体的多种格式文件，文件名通常带字重标识，例如：

roboto-v30-latin-regular.woff2
roboto-v30-latin-regular.woff
roboto-v30-latin-regular.ttf
roboto-v30-latin-regular.eot
roboto-v30-latin-regular.svg

woff2 体积最小、现代浏览器支持最好；woff 作为较老浏览器的回退；eot 仅旧版 IE 需要；ttf 和 svg 属于更老的兼容格式。实际项目中通常只需要 woff2 和 woff，其余可按目标浏览器范围取舍。

3. 放置字体文件

在网站目录下建一个专用文件夹，例如：

/assets/fonts/

把解压出的字体文件全部放入。保持文件名不变可以减少改路径时的出错概率。

4. 复制并调整 @font-face CSS

工具会生成一段 @font-face 代码。把它粘贴到自己的 CSS 文件（或单独的 fonts.css）中，重点修改 src 中的路径，使其相对于该 CSS 文件指向 /assets/fonts/。一个典型的声明如下：

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/roboto-v30-latin-regular.woff2') format('woff2'),
       url('/assets/fonts/roboto-v30-latin-regular.woff') format('woff');
}

要点：

  • font-family 的名称可以自定义，但后续引用必须一致。
  • src 中按优先级排列，浏览器会使用第一个它支持的格式，因此 woff2 放最前。
  • font-display: swap 让文字先用回退字体显示，字体加载完成后再替换，避免首屏空白。工具生成的代码若未包含，可自行加上。
  • 每个字重、每个样式各需要一条独立的 @font-face。

5. 在样式中引用

body {
  font-family: 'Roboto', -apple-system, 'Helvetica Neue', Arial, sans-serif;
}

把自托管字体名放在最前，后面保留系统字体作为回退，这样即使字体文件加载失败，页面仍可正常阅读。

验证是否生效

  1. 打开浏览器开发者工具的 Network 面板，筛选 Font，刷新页面。字体请求的域名应是你自己的站点，而不是 fonts.gstatic.com 或 fonts.googleapis.com。
  2. 查看请求的格式：现代浏览器应优先请求 .woff2 文件。
  3. 在 Elements 面板选中文本，查看 Computed 中的 font-family，确认实际使用的是自托管字体而非回退字体。
  4. 用无痕窗口或禁用缓存再测一次，排除本地缓存造成的误判。

常见卡点

  • 字体 404：最常见原因是 src 路径写错。路径是相对于 CSS 文件的位置解析的，不是相对于 HTML。用开发者工具看请求的实际 URL 即可定位。
  • 字体加载了但显示不对：检查 font-weight 和 font-style 是否与使用处匹配。例如只声明了 400，却在标题上用 font-weight: 700，浏览器会合成加粗而非使用真正的粗体文件。
  • 中文等大字符集字体体积过大：完整中文字体动辄数 MB。可考虑只保留需要的字重，或使用工具提供的子集化选项（若可用），否则首屏字体加载会明显拖慢。
  • 跨域问题：字体文件与页面同域时一般无碍；若把字体放在 CDN 等不同域名下，需要在服务器端为字体响应添加允许跨域的响应头。
  • 授权核对：自托管不等于无条件可用。发布前确认所选字体的许可证允许你当前的使用方式（尤其是嵌入到产品、应用中的场景）。