WordPress主题开发过程中修改全局字体教程

很多朋友讨论说WordPress主题字体不能让自己满意，需要通过一些方法来修改主题的默认字体，更换字体主要分为两种，第一种是直接调用系统的字体，来替换原来主题的默认字体；第二种则是使用自己的字体文件，来实现字体的替换。今天就为大家分享WordPress主题开发过程中修改全局字体教程。

第一种：

这种方法通过修改 CSS 文件就可以实现，有些主题自带了自定义 CSS 样式的设置，Wordpress 也提供了这一入口（后台管理 -> 外观 -> 自定义 CSS），这时候我们就可以直接在里面填上：

*:not([class*=”icon”]):not(i) {

font-family: Segoe UI, “Microsoft Yahei” !important;

}

上面的例子就是将字体全局优先替换成 Segio UI，其次替换成微软雅黑，下面列举几个比较适合阅读的字体，供大家替换，替换代码中的 Segio UI 和 Microsoft YaHei 即可。

第二种：

既然是私有字体，那就一定无法从公共库中直接选择，必定要上传到某个服务端来进行加载。这里可以选择：1. 上传至网站服务器 2. 上传至 Github（推荐）3. 上传至私有云存储进行调用在这之前需要先做一项准备工作，我们手上的字体文件通常只有一种格式，而为了满足不同浏览器的需要，我们需要将其扩展为五种格式，分别为.ttf .eot .woff .woff2 .svg。百度搜索就可以找到在线转换的工具，例如这个：在线字体转换

1、这种方法面临这一种风险，中文字体库体积通常很大，比如我现在正在使用的思源黑体，一个 ttf 文件就有 8M 多，再加上国内服务器的小带宽，肯定导致网站加载时间大大加长。

将你前面准备好的五种字体格式全部上传到网站的一个文件夹内，比如我放在 /fonts 文件夹内，且统一命名，比如 siyuan.ttf,siyuan.svg 等等。在自定义 CSS 样式中输入下列代码：

@font-face {

font-family: ‘随便一个名称，需要和下面的保持对应’;

src: url(‘../fonts/yourfont.eot’);

src:

url(‘../fonts/yourfont.eot’) format(’embedded-opentype’),

url(‘../fonts/yourfont.woff2’) format(‘woff2’),

url(‘../fonts/yourfont.woff’) format(‘woff’),

url(‘../fonts/yourfont.ttf’) format(‘truetype’),

url(‘../fonts/yourfont.svg’) format(‘svg’);

font-weight: normal;

font-style: normal;

}

*:not([class*=”icon”]):not(i) {

font-family: “与上面起的名字的对应” !important;

}

个人不是很推荐这种方法，建议还是使用下面的云存储托管。

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

jsDelivr 调用格式 https://cdn.jsdelivr.net/gh/Github 用户名 / 仓库名 / 具体路径 svg 文件大多会超过 20M，评论区小伙伴提醒 jsDelivr 调用文件超过 20M 会报错，可以使用其他方式加载 svg，不过留在上面也没什么问题，因为正常是不会使用到的。附上几个字体的调用链接（托管于 Github，使用 jsDelivr 加速服务）：

AdobeCleanHanSC

@font-face {

font-family: ‘AdobeCleanHanSC’;

src: url(‘https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.eot’);

src:

url(‘https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.eot’) format(’embedded-opentype’),

url(‘https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.woff2’) format(‘woff2’),

url(‘https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.woff’) format(‘woff’),

url(‘https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.ttf’) format(‘truetype’),

url(‘https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AdobeCleanHanSC/AdobeCleanHanSC.svg’) format(‘svg’);

font-weight: 400;

font-style: normal;

font-display: swap;

}

*:not([class*=”icon”]):not(i) {

font-family: “AdobeCleanHanSC” !important;

}

思源黑体

@font-face {

font-family: ‘siyuan’;

src: url(‘https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.eot’);

src:

url(‘https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.eot’) format(’embedded-opentype’),

url(‘https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.woff2’) format(‘woff2’),

url(‘https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.woff’) format(‘woff’),

url(‘https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.ttf’) format(‘truetype’),

url(‘https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/siyuan/siyuan.svg’) format(‘svg’);

font-weight: 400;

font-style: normal;

font-display: swap;

}

*:not([class*=”icon”]):not(i) {

font-family: “siyuan” !important;

}

筑紫 A 丸

@font-face {

font-family: ‘AWan’;

src: url (‘https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/Awan.eot’);

src:

url(‘https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.eot’) format(’embedded-opentype’),

url(‘https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.woff2’) format(‘woff2’),

url(‘https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.woff’) format(‘woff’),

url(‘https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.ttf’) format(‘truetype’),

url(‘https://cdn.jsdelivr.net/gh/Ratodo/Lib/fonts/AWan/AWan.svg’) format(‘svg’);

font-weight: normal;

font-style: normal;

font-display: swap;

}

*:not ([class*=”icon”]):not (i) {

font-family: “AWan” !important;

}