网站使用加载google font会使得内部增加一些fonts.gstatic.com API call，对网站的加载速度是不好的，如何本地加载google fonts?
选择下载好自己喜欢的字体
点击打开google fonts官网，选择自己喜欢的字体，点击下载到本地；
解压下载好的字体包
本篇文章以google font Muli为例，下载完之后，打开压缩包，里面有14个字体文件。
- Muli-Black.ttf
- Muli-BlackItalic.ttf
- Muli-Bold.ttf
- Muli-BoldItalic.ttf
- Muli-ExtraBold.ttf
- Muli-ExtraBoldItalic.ttf
- Muli-ExtraLight.ttf
- Muli-ExtraLightItalic.ttf
- Muli-Italic.ttf
- Muli-Light.ttf
- Muli-LightItalic.ttf
- Muli-Regular.ttf
- Muli-SemiBold.ttf
- Muli-SemiBoldItalic.ttf
需要用的只有Muli-Regular.ttf，Muli-Italic.ttf，Muli-Bold.ttf，其他的可以删除。
字体格式转换
我们需要woff2, eot, svg, ttf, wof格式文件，点击打开https://font-converter.net/en，将刚刚下载的Muli-Regular.ttf上传进行转换，点击转换之后自动下载。
上传字体到服务器
解压最后得到的压缩包，将文件上传到themes/fonts/muli/,用同样的步骤把转换格式后的Muli-Italic，Muli-Bold文件都上传到服务器。
添加字体到style.css
打开child theme的style.css，添加以下代码：
/* fonts:
================================================================================= */
/* muli regular */
@font-face {
font-family: 'muli';
src: url('../fonts/muli/muli-Regular.eot');
src: url('../fonts/muli/muli-Regular.eot?#iefix') format('embedded-opentype'),
url('../fonts/muli/muli-Regular.woff2') format('woff2'),
url('../fonts/muli/muli-Regular.woff') format('woff'),
url('../fonts/muli/muli-Regular.ttf') format('truetype'),
url('../fonts/muli/muli-Regular.svg#muli_regularregular') format('svg');
font-weight: 400;
font-style: normal;
}
/* muli italic */
@font-face {
font-family: 'muli';
src: url('../fonts/muli/fonts/muli/muli-Italic.eot');
src: url('../fonts/muli/fonts/muli/muli-Italic.eot?#iefix') format('embedded-opentype'),
url('../fonts/muli/fonts/muli/muli-Italic.woff2') format('woff2'),
url('../fonts/muli/fonts/muli/muli-Italic.woff') format('woff'),
url('../fonts/muli/fonts/muli/muli-Italic.ttf') format('truetype'),
url('../fonts/muli/fonts/muli/muli-Italic.svg#muli_regularitalic') format('svg');
font-weight: 400;
font-style: italic;
}
/* muli bold */
@font-face {
font-family: 'muli';
src: url('../fonts/muli/muli-Bold.eot');
src: url('../fonts/muli/muli-Bold.eot?#iefix') format('embedded-opentype'),
url('../fonts/muli/muli-Bold.woff2') format('woff2'),
url('../fonts/muli/muli-Bold.woff') format('woff'),
url('../fonts/muli/muli-Bold.ttf') format('truetype'),
url('../fonts/muli/muli-Bold.svg#mulibold') format('svg');
font-weight: 700;
font-style: normal;
}
把字体设置为你需要用的地方：
body {
color: #000;
font-family: 'Muli', sans-serif;
font-size: 17px;
line-height: 1.8!important;
letter-spacing: 0.25px;
}
h1 {
font-family: 'Muli', sans-serif;
}
禁用Google fonts
打开设置autoptimize，勾选Remove Google Fonts
最后检查
- 清理浏览器和网站缓存；
- 重新加载页面；
- 使用Chrome检查元素；
- 点击Network面板；
- 查看加载的字体；（这里现在使用的是其他字体）
最后你可以在https://gtmetrix.com/测试一下，禁用google font能减少很多request，如果你在设置修改中有任何问题，可以在下方留言。
如果觉得文章对你有帮助，可以加入到邮件列表，文章不定期更新，邮件会第一时间通知你。
