很多盆友问，网页字体一直是微软雅黑这个默认字体，早都看乏味了，想换个口味，该怎么更换网页的字体呢？

接下来，龙笑天就以 Dragon 主题和小米的MiSans-Normal字体为例，来告诉大家，怎么方便快捷的更换网页字体为自己喜欢的字体。PS：标题虽然标的是 WordPress，但理解本教程的原理过程后，是可以适用于任意的网站程序的哦~

1.下载字体

既然是更换网页字体，那么第一步肯定是您要先选中一款自己喜欢的字体，然后下载下来了。

注意：字体是涉及版权的，可不是能被随便使用的哈，大家找字体的时候，一定要注意找能被免费商用的字体！本文以小米可免费商用的MiSans-Normal字体为例。下载MiSans-Normal字体：传送门。

下载好MiSans-Normal字体后，解压压缩包找到里面的MiSans-Normal.woff和MiSans-Normal.woff2这 2 个体积较小适用于网页的字体文件，将这 2 文件放入你网站的/wp-content/fonts/MiSans/这个目录里，然后下文代码里的www.yourdomain.com更换为你自己的网站。

2.引用字体文件

字体文件下载并放置指定目录后，接下来就是在网页中引用使用字体文件了。以下有 2 种引用方式，大家任选其一即可。

2.1 主题设置中直接添加

比如，Dragon 主题的主题设置的“头部-Header 中加载自定义代码”里，直接添加下面的 CSS 代码即可引用字体了。

<style>
@font-face {
    font-family: 'MiSans-Normal';
    src: url('https://www.yourdomain.com/wp-content/fonts/MiSans/MiSans-Normal.woff2') format('woff2'),
         url('https://www.yourdomain.com/wp-content/fonts/MiSans/MiSans-Normal.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
*:not([class*="icon"]):not(i) {
	font-family:"MiSans-Normal","Microsoft YaHei","微软雅黑",-apple-system,"Roboto","Apple Color Emoji",Arial,"Open Sans",SimSun,sans-serif;
}
</style>

2.2 主题的 style.css 文件中添加

如果您的主题设置里不支持添加自定义的 CSS 代码的话，可以将下面代码加入到主题的 style.css 文件的最底部即可。

@font-face {
    font-family: 'MiSans-Normal';
    src: url('https://www.yourdomain.com/wp-content/fonts/MiSans/MiSans-Normal.woff2') format('woff2'),
         url('https://www.yourdomain.com/wp-content/fonts/MiSans/MiSans-Normal.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
*:not([class*="icon"]):not(i) {
	font-family:"MiSans-Normal","Microsoft YaHei","微软雅黑",-apple-system,"Roboto","Apple Color Emoji",Arial,"Open Sans",SimSun,sans-serif;
}

这种方式因为是直接修改的静态 CSS 文件，因此，如果你使用了 CDN 的话，记得刷新此 CSS 文件的 CDN 缓存。以及，清理浏览器的静态文件缓存。

3.字体相关知识技巧

3.1 Webfont 字体介绍

Webfont 是一种用于网页设计的字体格式，通过将字体嵌入到网页中，使得用户在浏览网页时能够看到与产品设计时相同的字体样式，可以增强网页的视觉效果和用户体验。

常见的有 WOFF、TTF、OTF、EOT、SVG 等格式，下方列表是对于几类格式的简介介绍：

WOFF(Web Open Font Format)：一种专为网页设计的字体格式，它提供了压缩和优化，以减少加载时间和提高性能。
TTF (TrueType Fonts)：一种广泛使用的字体格式，也适用于网页。
OTF (OpenType Fonts)：一种高级字体格式，支持更复杂的字体特性。
EOT (Embedded OpenType Fonts)：微软开发的字体格式，专为 IE 浏览器设计。
SVG (Scalable Vector Graphics)：一种图形格式，也可以用于字体。

根据MDN参考文档，Webfont 各格式详细列表：

3.2 转换字体文件格式

通常我们下载到的字体文件，可能只有 ttf 格式，而这种格式的字体文件通常都 10M+非常大，这对于网页加载，就有点吃力了。因此，我们应该将 ttf 格式转换为专为网页设计的压缩和优化了的字体格式：woff和woff2，以减少加载时间和提高性能。在线转换字体格式为 woff/woff2 的工具有以下几个，大家选择其中一个即可:

https://transfonter.org/
https://fontconverter.com/zh/
https://www.lddgo.net/convert/font-format-converter

3.3 加速字体文件加载

大多数情况下，即使是转换字体格式为了 woff/woff2 格式，字体文件体积也比较大，对于小带宽服务器来说亚历山大，那么怎么办呢？我们可以将字体文件上传使用 CDN 来加速字体文件加载。

当然，本文里的 MiSans 字体，就不用自己搞 CDN 加速了，我们可以直接引用小米字体官方的 CDN 加速源，方法如下：

<link rel="stylesheet" href="https://font.sec.miui.com/font/css?family=MiSans:400,700:MiSans&display=swap" />
<style>
*:not([class*="icon"]):not(i) {
	font-family:"MiSans";
}
</style>

3.4 字体裁切

如果你使用的文字字符都是固定的，那么通过这个在线工具来裁剪字体文件：https://font-subset.disidu.com/，可以极大限度的缩小字体文件的体积，毕竟其只包含了固定的那些字。

3.5 在线字体查看器

有些时候，我们可能想查看某个字体文件内包含支持了哪些文字字符，可以使用这个在线工具来完成：https://www.bejson.com/ui/font/。

4.相关参考

Webfont 兼容性 - caniuse
免费引入商用黑体字体系列整理及 CSS 字体引入教程 - 小灯泡设计
Webfont 优化：使用字体裁剪缩小体积和提升加载速度 | 有点东西
网站字体加载之坑 - 皓子的小站
网站使用 HarmonyOSHans 字体 - 李锋镝的博客
Typecho handsome 主题更换字体详细指南 - Xuan's blog
Web 网站引入在线字体整理及 CSS 字体引入亲妈式教程（20260108 更新） – 风记星辰