如何在WordPress中使用本地字体

问题情形

有很多时候，Wordpress 的字体不能让我们满意，这个时候我们就可以通过一些方法来修改主题的默认字体，来达到我们想要的效果。

解决方案

此次解决方案分为以下两种

• 直接CSS调用系统字体来实现更换字体
• 使用本地字体来更换字体

直接使用系统字体

使用系统字体通过修改 CSS 文件就可以实现，在（WP后台管理 -> 外观 -> 自定义 CSS），填入以下代码：

*:not([class*="icon"]):not(i) {
font-family: Segoe UI, "Microsoft Yahei" !important;
}

替换效果

字体全局优先替换成 Segio UI，其次替换成微软雅黑。

常用系统字体名称

• 宋体（SimSun）
• 微软雅黑（”Microsoft Yahei”）
• 华文黑体（STHeiti）
• 冬青黑体（ Hiragino Sans GB )
• 苹方（PingFang SC）

使用本地字体

首先我们需要在WordPress根目录中新建一个Fonts文件夹(其他名字也行，方便后期调用)。

然后下载你需要的字体文件放到其中。

注意:

因为考虑到字体在浏览器的兼容问题，如果你下载的字体文件为TTF格式建议转换为WOFF 或 WOFF 2.0 格式。

如果下载不到WOFF格式的字体文件可以点击下方链接进行转换，然后放到上面新建的Fonts文件夹中。

点击进入转换

字体调用

在（WP后台管理 -> 外观 -> 自定义 CSS）或者在主题的额外CSS中填入以下代码:

@font-face {
font-family: '随便一个名称，需要和下面的保持对应';
src: url('../fonts/字体文件.woff2');
src:
url('../fonts/yourfont.woff2') format('woff2'),
url('../fonts/yourfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
*:not([class*="icon"]):not(i) {
font-family: "与上面起的名字的对应" !important;
}

即可调用

其他方式

你可以使用website builder插件或者CAOS for Webfonts插件 实现字体更换

但是使用插件字体有很大的局限性，但是方便。具体方法看自己挑选。