如何本地加载Google Fonts, 而不调用Google的fonts.gstatic.com API

网站使用加载google font会使得内部增加一些fonts.gstatic.com API call,对网站的加载速度是不好的,如何本地加载google fonts?
wordpress-google-fonts-load-locally

网站使用加载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,如果你在设置修改中有任何问题,可以在下方留言。

如果觉得文章对你有帮助,可以加入到邮件列表,文章不定期更新,邮件会第一时间通知你。

发表评论

您的电子邮箱地址不会被公开。

Related Posts