前言

网站找过一些更改字体代码，有好用有不好用的，很多代码忽略了一个问题，那就是跟主题的兼容。比如子比主题用了其它的代码，导致代码复制图标不显示。所以青鹿云修改了一下代码，在主题兼容测试上没有问题。

很多站长对网站的的字体比较在意，有时候换一种风格的字体，整个网站的阅读体验或许就会变的很不同，这样就会有很多站长对网站进行字体更换，所以对字体的选择也是非常重要。大多数站长在使用博客初期，喜欢魔改美化自己的网站，因此本期站长给大家出一期，如何给自己的网站更换成自己喜爱的字体。

之前发的字体更换教程转换字体需要付费，这篇文章中给你推荐了免费转换字体的网站

教程开始

1.首先下载自己喜欢的字体包，

网上找自己喜欢的字体，下载到本地，注意尽量选择免费可商用字体，不要更换成有版权收费的字体，如果使用了可能后期会出现版权问题，造成不必要的麻烦。

这里青鹿云也分享了一些免费商用的字体↓↓↓可以参考下

https://www.milubk.com/resources/font

2.转换字体包格式

当我们下载字体之后会有一个压缩包 里面会有一个.ttf 的字体文件包，因为有些浏览器不支持这种字体的格式显示 所以我们需要对字体格式转换，如果不进行转换字体格式，有些浏览器会无法显示自己设置的喜欢的字体 如果你毫无技术不会转换字体格式不要怕，这里提供一个免费快捷的字体转换网站

字体转换网站

你只需要转换.ttf 文件为 eot,woff,woff2,svg,tff 以上格式随便一种 如下图，我已经用红色框框给你标记，按图操作即可

3.网站调用字体地址

把你转换好的 5 个字体文件放在自己网站随便那个文件夹内，只需要记住地址就行

比如：根目录下的-案例：https://网站域名/milu.ttf

如果是 WordPress 子比主题的话直接把下面的 css 代码放在自定义 css 样式中：

路径：后台主题设置—>自定义代码—>自定义 CSS 样式代码把下面的代码添加到里面，然后刷新页面即可

/*CDN字体开始*/
@font-face {
font-family: 'MiSans-Regular.subset';
src:
url('字体地址.woff2') format('woff2'),
url('字体地址.woff') format('woff'),
url('字体地址.ttf') format('truetype'),
url('字体地址.eot') format('embedded-opentype'),
url('字体地址.svg') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;
}
body{
font-family:'MiSans-Regular.subset';
}
/*CDN字体结束*/

字体云端托管

我是比较推荐云端托管字体，上传至 Github 使用免费的 jsDelivr CDN 加速，jsDelivr 如何如何好用这边就不多说了，Github 怎么使用这边也不多说了，大体方法就是将你的字体文件上传至 Github 自己的仓库中，然后使用 jsDelivr 提供的加速服务来调用，方便好用还不要钱。

jsDelivr 调用格式 https://cdn.jsdelivr.net/gh/Github 用户名 / 仓库名 / 具体路径svg

友情提醒丨jsDelivr的实用限制

• 单个文件大小。（实测20M是没有问题的）
• 单个仓库最大文件数10000。
• 单个仓库容量。（超过50M警告，超过100M封禁）

以下字体代码的字体文件已经处理完毕，放在jsdelivr托管平台上。后期可能会挂。如果设置没有生效，请使用上述教程更改字体文件地址。

（托管于 Github，使用 jsDelivr 加速服务）：

/*CDN字体开始*/
@font-face {
font-family: 'moonbridge';
src:
url('https://cdn.jsdelivr.net/gh/milusvip/Cloud@main/font/chucy/chucy.woff2') format('woff2'),
url('https://cdn.jsdelivr.net/gh/milusvip/Cloud@main/font/chucy/chucy.woff') format('woff'),
url('https://cdn.jsdelivr.net/gh/milusvip/Cloud@main/font/chucy/chucy.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}
:not(i) {
font-family: "moonbridge";
}
/*CDN字体结束*/