独立站常用工具之运营Google Fonts字体下载完全指南从TTF到Web字体的正确姿势

你可能也遇到过这样的困惑：明明在 Google Fonts 上选中了一款漂亮的免费字体，下载下来却是 .ttf 文件，而你的网页项目需要的是 .woff2 格式。这篇文章将帮你彻底搞懂 Google Fonts 的字体格式问题，并教你三种获取 Web 字体的正确方法。

一、为什么下载的是 TTF，而不是 Web 字体？

很多人在 Google Fonts 官网上看到心仪的字体后，会点击右上角的 “Download family” 按钮。这样下载到的确实是 .ttf 文件，但这个格式是为桌面软件准备的——比如 Word、PPT、Photoshop 等。

而网页开发需要的是 .woff2 格式，它体积更小、加载更快，是当下 Web 字体的最佳实践标准。

简单来说：

TTF → 给电脑用的（桌面安装）
WOFF2 → 给网页用的（Web 字体）

所以，不是 Google Fonts 没有提供 Web 字体，而是你选择了”下载桌面版”这个入口。要获取 Web 字体，有以下几种方法。

二、方法一：使用 CDN 嵌入（最推荐，无需下载）

如果你的项目可以访问外网，这是最简单、最专业的方式。你不需要下载任何文件，只需在 HTML 中引用 Google Fonts 的 CSS 服务即可。

步骤

1. 在 Google Fonts 官网选择字体

访问 fonts.google.com，找到你喜欢的字体（比如 Inter），点击进入详情页。

在页面下方，勾选你需要的字重（如 400、700）。⚠️ 注意：选择的字重越多，加载越慢，按需选择即可。

2. 复制嵌入链接

点击右上角的 “查看所选系列”（View Selected Families）小窗口，你会看到类似这样的代码：

1
2
3

<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=Inter:wght@400;700&display=swap" rel="stylesheet">

3. 粘贴到 HTML 中使用

将上述代码放入 HTML 的 <head> 中，然后在 CSS 中引用：

1
2
3

body {
  font-family: 'Inter', sans-serif;
}

优点

零配置，一行代码搞定
Google 会自动根据浏览器提供最优格式（WOFF2、WOFF 等）
利用 CDN 缓存，加载速度快
无需维护字体文件

缺点

需要联网访问 Google 服务（部分地区可能不稳定）

三、方法二：使用 google-webfonts-helper（推荐国内用户）

这是我最推荐的下载方式，尤其适合国内开发者。它是一个在线工具，操作直观，且不需要安装任何命令行工具。

步骤

1. 访问工具网站

打开 gwfh.mranftl.com（google-webfonts-helper）。

2. 搜索并选择字体

在搜索框中输入字体名称（如 Inter），点击进入。

3. 选择字重和格式

在 “Select weights” 中勾选你需要的字重（如 400、700）
在 “Select formats” 中，只勾选 WOFF2（这是现代浏览器支持的最优格式）
也可以勾选 WOFF 作为备用

4. 复制 CSS 或下载文件

页面底部会生成两样东西：

CSS 代码：可以直接复制到你的样式文件中
下载按钮：点击即可下载包含 .woff2 文件的压缩包

生成的 CSS 示例

/* inter-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter-v13-latin-regular.woff2') format('woff2');
}
/* inter-700 - latin */
@font-face {
  font-display: swap;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/inter-v13-latin-700.woff2') format('woff2');
}

优点

完全免费，无需安装任何软件
支持指定字符集（如只下载 latin 或 latin-ext），进一步减小体积
生成的 CSS 代码可以直接使用
国内访问速度好

四、方法三：使用 google-font-cli 命令行工具

如果你习惯使用命令行，且需要自动化下载流程，可以试试 google-font-cli。

安装步骤

1. 确保 Node.js 已安装

在终端输入：

node -v

如果没有安装，先去 nodejs.org 下载 LTS 版本。

2. 全局安装 google-font-cli

1	npm install -g google-font-cli

下载 WOFF2 格式

安装成功后，使用 download 命令（注意：**不是 install**）：

1 2	# 下载 Inter 字体的 WOFF2 格式 gfcli download Inter --woff2

如果只需要特定字重：

1	gfcli download Inter -v 400,700 --woff2

下载完成后，当前目录下会出现 .woff2 文件。

⚠️ 常见错误

错误命令	正确命令	原因
`gfcli install Inter --woff2`	`gfcli download Inter --woff2`	`install` 是安装到系统，不支持 `--woff2`
`gfcli download Inter --woff2` 报错	检查是否用 `-v` 指定字重	部分版本要求明确指定字重

优点

适合批量下载和自动化脚本
可以精确控制下载内容

缺点

需要安装 Node.js 环境
命令参数需要熟悉

五、三种方法对比

对比项	CDN 嵌入	google-webfonts-helper	google-font-cli
是否需要下载文件	❌ 不需要	✅ 需要	✅ 需要
是否需要安装软件	❌ 不需要	❌ 不需要	✅ 需要 Node.js
适合国内网络	⚠️ 可能不稳定	✅ 良好	✅ 良好
操作难度	⭐ 最简单	⭐⭐ 简单	⭐⭐⭐ 中等
推荐场景	在线项目	自托管/离线项目	自动化批量下载

六、常见问题解答

Q1：WOFF2 和 WOFF 有什么区别？

WOFF2 是 WOFF 的升级版，压缩率更高，文件体积更小，加载速度更快。所有现代浏览器都支持 WOFF2。

Q2：我下载了 TTF，能不能转成 WOFF2？

可以，但不推荐。在线转换工具（如 transfonter.org）可以将 TTF 转为 WOFF2，但 Google Fonts 官方提供的 WOFF2 经过了专业优化，压缩率更好。建议直接从源头获取。

Q3：自托管字体时，@font-face 中的路径怎么写？

假设你的项目结构如下：

project/
├── css/
│   └── style.css
└── fonts/
    └── inter-regular.woff2

CSS 中应写：

1	src: url('../fonts/inter-regular.woff2') format('woff2');

Q4：为什么我选了很多字重，页面加载变慢了？

每个字重都是一个独立的字体文件，浏览器需要额外下载。只选择你实际会用到的字重（通常 400 和 700 就够了）。

七、总结

你的需求	推荐方案
在线项目，能访问 Google	方法一：CDN 嵌入
自托管字体，或国内网络受限	方法二：google-webfonts-helper
自动化批量下载	方法三：google-font-cli

比如：

PS C:\Windows\system32> gfcli download Inter --woff2

Downloading Google Font List...


Inter variant 100 processed: C:\Windows\system32\Inter-100.woff2
Inter variant 200 processed: C:\Windows\system32\Inter-200.woff2
Inter variant 300 processed: C:\Windows\system32\Inter-300.woff2
Inter variant 500 processed: C:\Windows\system32\Inter-500.woff2
Inter variant 600 processed: C:\Windows\system32\Inter-600.woff2
Inter variant 700 processed: C:\Windows\system32\Inter-700.woff2
Inter variant 800 processed: C:\Windows\system32\Inter-800.woff2
Inter variant 900 processed: C:\Windows\system32\Inter-900.woff2
Inter variant 100italic processed: C:\Windows\system32\Inter-100italic.woff2
Inter variant 200italic processed: C:\Windows\system32\Inter-200italic.woff2
Inter variant 300italic processed: C:\Windows\system32\Inter-300italic.woff2
Inter variant regular processed: C:\Windows\system32\Inter-regular.woff2
Inter variant italic processed: C:\Windows\system32\Inter-italic.woff2
Inter variant 500italic processed: C:\Windows\system32\Inter-500italic.woff2
Inter variant 600italic processed: C:\Windows\system32\Inter-600italic.woff2
Inter variant 700italic processed: C:\Windows\system32\Inter-700italic.woff2
Inter variant 800italic processed: C:\Windows\system32\Inter-800italic.woff2
Inter variant 900italic processed: C:\Windows\system32\Inter-900italic.woff2

如何应用到独立站里面，比如我有一个hexo博客，我想要更换字体，请问如何操作，目前字体已经下载下来了，并且放在了source/font目录下，主题是butterfly

太好了！你已经成功下载了所有 Inter 字体的 WOFF2 文件，现在我们来把它们应用到你的 Hexo + Butterfly 主题中。

📁 确认文件位置

首先，确保你的字体文件放在这里：

你的博客根目录/
└── source/
    └── font/
        ├── Inter-100.woff2
        ├── Inter-200.woff2
        ├── Inter-300.woff2
        ├── Inter-regular.woff2
        ├── Inter-italic.woff2
        ├── Inter-500.woff2
        ├── Inter-600.woff2
        ├── Inter-700.woff2
        ├── Inter-800.woff2
        ├── Inter-900.woff2
        └── ... (所有 italic 文件)

方法一：通过 Butterfly 主题配置（推荐）

Butterfly 主题支持自定义字体，这是最干净的方式。

1. 创建自定义字体 CSS 文件（字体不是放在主题里面而是放在source目录下，新建一个字体目录）

在 source/ 目录下创建一个 CSS 文件来定义字体：

创建文件：source/css/custom-fonts.css

/* ===== Inter 字体定义 ===== */

/* 常规字重 */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('/font/Inter-100.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url('/font/Inter-200.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/font/Inter-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/font/Inter-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/font/Inter-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/font/Inter-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/font/Inter-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/font/Inter-800.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('/font/Inter-900.woff2') format('woff2');
}

/* 斜体字重 */
@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url('/font/Inter-100italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url('/font/Inter-200italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('/font/Inter-300italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/font/Inter-italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url('/font/Inter-500italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url('/font/Inter-600italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('/font/Inter-700italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url('/font/Inter-800italic.woff2') format('woff2');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url('/font/Inter-900italic.woff2') format('woff2');
}

然后要应用到全局（重点）：

/* 应用到全局 */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
}

2. 在 Butterfly 配置中引入字体

编辑你的 _config.butterfly.yml 文件：

# 在 inject 部分引入自定义 CSS
inject:
  head:
    # 引入你刚刚创建的字体 CSS 文件
    - <link rel="stylesheet" href="/css/custom-fonts.css">

# 修改字体配置（找到 font 部分）
font:
  global-font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif
  code-font-family: Inter, 'SF Mono', 'Fira Code', 'Consolas', 'Liberation Mono', 'Menlo', monospace

方法二：直接修改 Butterfly 的样式文件

如果你想更直接一些，可以修改 Butterfly 主题的 CSS 文件。

1. 找到并编辑主题 CSS 文件

在 themes/butterfly/source/css/ 目录下找到 style.styl 或 index.styl，在文件最顶部添加：

// 引入 Inter 字体
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('/font/Inter-100.woff2') format('woff2');
}
// ... 重复所有字重
// (内容同方法一中的 @font-face 代码)

2. 修改字体变量

在 themes/butterfly/source/css/_variables.styl 中找到字体变量并修改：

1
2
3

// 找到类似这样的代码并修改
$global-font-family = Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans SC', sans-serif
$code-font-family = Inter, 'SF Mono', 'Fira Code', 'Consolas', 'Liberation Mono', 'Menlo', monospace

方法三：使用 Hexo 的 injector 功能（最灵活）

创建一个专门的脚本文件，让 Hexo 自动注入字体配置。

1. 创建 injector 文件

在博客根目录创建 scripts/font.js：

// scripts/font.js
hexo.extend.injector.register('head_end', () => {
  return `
  <style>
    /* Inter 字体定义 */
    @font-face { font-family:'Inter'; font-style:normal; font-weight:100; font-display:swap; src:url('/font/Inter-100.woff2') format('woff2'); }
    @font-face { font-family:'Inter'; font-style:normal; font-weight:200; font-display:swap; src:url('/font/Inter-200.woff2') format('woff2'); }
    @font-face { font-family:'Inter'; font-style:normal; font-weight:300; font-display:swap; src:url('/font/Inter-300.woff2') format('woff2'); }
    @font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('/font/Inter-regular.woff2') format('woff2'); }
    @font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('/font/Inter-500.woff2') format('woff2'); }
    @font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('/font/Inter-600.woff2') format('woff2'); }
    @font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('/font/Inter-700.woff2') format('woff2'); }
    @font-face { font-family:'Inter'; font-style:normal; font-weight:800; font-display:swap; src:url('/font/Inter-800.woff2') format('woff2'); }
    @font-face { font-family:'Inter'; font-style:normal; font-weight:900; font-display:swap; src:url('/font/Inter-900.woff2') format('woff2'); }
    
    @font-face { font-family:'Inter'; font-style:italic; font-weight:100; font-display:swap; src:url('/font/Inter-100italic.woff2') format('woff2'); }
    @font-face { font-family:'Inter'; font-style:italic; font-weight:200; font-display:swap; src:url('/font/Inter-200italic.woff2') format('woff2'); }
    @font-face { font-family:'Inter'; font-style:italic; font-weight:300; font-display:swap; src:url('/font/Inter-300italic.woff2') format('woff2'); }
    @font-face { font-family:'Inter'; font-style:italic; font-weight:400; font-display:swap; src:url('/font/Inter-italic.woff2') format('woff2'); }
    @font-face { font-family:'Inter'; font-style:italic; font-weight:500; font-display:swap; src:url('/font/Inter-500italic.woff2') format('woff2'); }
    @font-face { font-family:'Inter'; font-style:italic; font-weight:600; font-display:swap; src:url('/font/Inter-600italic.woff2') format('woff2'); }
    @font-face { font-family:'Inter'; font-style:italic; font-weight:700; font-display:swap; src:url('/font/Inter-700italic.woff2') format('woff2'); }
    @font-face { font-family:'Inter'; font-style:italic; font-weight:800; font-display:swap; src:url('/font/Inter-800italic.woff2') format('woff2'); }
    @font-face { font-family:'Inter'; font-style:italic; font-weight:900; font-display:swap; src:url('/font/Inter-900italic.woff2') format('woff2'); }

    /* 应用到全局 */
    body, .global-font, .article-title, .post-title {
      font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
    }
    
    code, pre, .code-font {
      font-family: Inter, 'SF Mono', 'Fira Code', 'Consolas', 'Liberation Mono', monospace !important;
    }
  </style>
  `;
});

🎯 我推荐的方法组合

对于 Butterfly 主题，我建议这样操作：

采用方法一：在 source/css/custom-fonts.css 中定义所有 @font-face
在 _config.butterfly.yml 中引入，并修改 font.global-font-family

这样做的好处是：

✅ 字体定义和主题配置分离，升级主题时不会丢失
✅ 所有字体文件放在 source/font/ 下，Hexo 生成时自动复制
✅ 配置清晰，容易维护

🔧 验证和应用

完成配置后，执行以下命令：

# 清理缓存
hexo clean

# 生成静态文件
hexo generate

# 本地预览
hexo server

打开浏览器访问 http://localhost:4000，打开开发者工具（F12）→ Network 标签页，应该能看到你的 .woff2 字体文件被加载。在 Elements 标签中查看任意文本元素，font-family 应该显示为 Inter。

⚠️ 注意事项

字体文件大小：你下载了 18 个字体文件（含斜体），全部加载会影响页面速度。建议只保留你实际会用到的字重（通常 400、500、600、700 就够了），删掉不用的可以大幅减少加载时间。
**font-display: swap**：这个属性保证文字在字体加载完成前先用系统字体显示，避免出现长时间空白，提升用户体验。
路径斜杠：/font/Inter-100.woff2 中的 / 代表网站根目录，对应 Hexo 的 public/ 目录。
缓存问题：如果字体没有立即生效，可以清除浏览器缓存或使用无痕模式测试。

这个命令可以列出google所有免费字体吗？因为不知道有哪些字体可用，希望列出字体列表

是的，可以用 gfcli 列出所有字体。不过，它自己没有一个像 gfcli list 这样直接的命令，但可以通过搜索功能来实现。除此之外，还有一个来自 Google 官方的更强大的方式。

🔍 方法一：通过 `gfcli` 搜索（适用于命令行）

gfcli 的 search 命令可以帮你发现字体，它的匹配规则很宽松，你输入几个字母，它就会列出名称中包含这些字母的所有字体。

命令格式：

1	gfcli search [字体名称关键词]

使用示例：

输入一个短词，模糊搜索：
1
gfcli search sans
这会列出名字里包含 “sans” 的字体（比如 Open Sans, Noto Sans）。
输入一个具体名字：
1
gfcli search inter
这会直接定位到 Inter 字体。

你可以通过不断更换关键词来探索，比如 serif、mono 或 display，从而发现大量不同风格的字体。

🌐 方法二：Google Fonts 开发者 API（最强大）

这是 Google 官方提供的开发者 API，可以获取所有字体的完整列表及其元数据（如样式、字符集等），非常权威。

你可以直接在浏览器中访问以下链接（把 YOUR-API-KEY 换成你自己的 API Key）：

1	https://www.googleapis.com/webfonts/v1/webfonts?key=YOUR-API-KEY

它会返回一个巨大的 JSON 文件，里面就是所有的字体数据，示例结构如下：

{
 "kind": "webfonts#webfontList",
 "items": [
  {
    "family": "Anonymous Pro",
    "variants": ["regular", "italic", "700", "700italic"],
    "subsets": ["cyrillic", "greek", "latin", "latin-ext"],
    "category": "monospace"
  },
  {
    "family": "Antic",
    "variants": ["regular"],
    "subsets": ["latin"],
    "category": "sans-serif"
  }
 ]
}

💡 最推荐的方法：直接在官网浏览

说实话，最直观、体验最好的方式，还是直接访问 Google Fonts 官网 (fonts.google.com)。官网本身就是为浏览和挑选字体设计的，你可以按分类（Serif/Sans-serif）、按热门程度筛选，还能直接输入文字预览效果，比命令行方便得多。

考虑到你用的是 Hexo 博客，建议先在官网上挑选好喜欢的字体，记下它的名字，然后再用你熟悉的 gfcli download 命令下载 .woff2 文件，这样流程最顺畅。

src: url('/font/Inter-regular.woff2')（从根目录开始，正确）这个到底从哪里开始？

啊哈！找到问题的根本原因了！

🔍 问题所在

你的字体放在了：

1	E:\project\blog\cognize\themes\butterfly\source\font\

但是你的 Hexo 博客根目录是：

1	E:\project\blog\cognize\

当 Hexo 生成静态文件时，它只会处理根目录下的 source/ 文件夹，而不会处理主题内部的 source/ 文件夹（除非主题有特殊的处理机制）。

所以：

✅ 你的字体在 themes/butterfly/source/font/ → Hexo 不会把它复制到 public/
❌ 所以访问 /font/Inter-regular.woff2 会返回 404

🛠️ 解决方案

方案一：把字体移到博客根目录的 `source/` 下（推荐）

这是最简单、最标准的方式。

E:\project\blog\cognize\
├── source/                    ← 博客根目录的 source
│   ├── _posts/
│   ├── css/
│   ├── font/                  ← 【把字体移到这里】
│   │   ├── Inter-regular.woff2
│   │   └── ...
│   └── ...
├── themes/
│   └── butterfly/
│       └── source/            ← 主题自己的 source（不用管它）
└── _config.yml

操作步骤：

剪切 E:\project\blog\cognize\themes\butterfly\source\font\ 整个文件夹
粘贴到 E:\project\blog\cognize\source\font\
重新生成：hexo clean && hexo generate && hexo server

然后你的字体 URL 应该是：

1	http://localhost:4000/font/Inter-regular.woff2 ✅ 可以访问

方案二：修改 Hexo 配置，包含主题的 source 目录

如果你坚持要把字体放在主题目录下，需要修改 _config.yml：

1
2
3

# _config.yml
include:
  - themes/butterfly/source/font/**/*

这样 Hexo 在生成时会把主题里的字体也复制到 public/ 目录。

注意：这种方式不推荐，因为升级主题时可能会丢失字体文件。

方案三：使用主题的 inject 功能（如果 Butterfly 支持）

有些主题支持在配置中指定自定义资源路径。查看 _config.butterfly.yml 中是否有类似配置：

# 可能类似这样的配置
custom_file_path:
  # 如果主题支持自定义 css 路径
  style: source/css/custom-style.css

但即便如此，字体文件最好还是放在根目录的 source/ 下。

✅ 验证是否成功

完成方案一后：

直接访问测试：
浏览器打开 http://localhost:4000/font/Inter-regular.woff2
- 如果弹出下载或显示内容 → ✅ 成功
- 如果 404 → ❌ 还没成功
开发者工具验证：
F12 → Network → 刷新 → 搜索 woff2，应该能看到字体文件被加载，状态码 200
字体生效验证：
选中页面文字 → Computed → font-family 应该显示 Inter

📌 记住这个规则

对于 Hexo 博客：

文件位置	是否能被访问到
`项目根目录/source/xxx`	✅ 会被复制到 `public/xxx`
`项目根目录/themes/主题名/source/xxx`	❌ 默认不会被复制

所以，所有自定义资源（字体、图片、自定义 CSS 等）都应该放在博客根目录的 source/ 下，而不是主题的 source/ 下。

赶快试试方案一，把字体移到根目录的 source/font/ 下，重新生成后应该就能生效了！如果还有问题，告诉我你测试 http://localhost:4000/font/Inter-regular.woff2 的结果。

如果还不生效

可能原因 1：`mycustom.css` 没有被引入

检查 _config.butterfly.yml：

yaml

1
2
3

inject:
  head:
    - <link rel="stylesheet" href="/css/mycustom.css">

或者检查主题是否有自定义 CSS 配置项。

可能原因 2：字体文件命名大小写问题

如果你的文件名是 Inter-Regular.woff2（R 大写），URL 中也必须写成大写。

查看你的实际文件名：

bash

1	dir E:\project\blog\cognize\source\font\

确保 CSS 中的文件名和实际文件名完全一致（包括大小写）。