给WordPress博客引用并调用Google字体!香!

给WordPress博客引用并调用Google字体!香!

今天捣鼓网站字体,换了好几个插件都不好用,没想到无意中发现WordPress支持直接调用Google字体,在之前还不知道可以这样。。哈哈哈,教程开始。

首先打开Google字体网站,地址:https://fonts.google.com,注意:因为是谷歌的子域,所以需要科学上网,不会的百度下哈

选择语言:Chinese-simplified(中文简体)

给WordPress博客引用并调用Google字体!香!插图1

点击心仪的字体

给WordPress博客引用并调用Google字体!香!插图3

点击Remove this style,以添加字体

给WordPress博客引用并调用Google字体!香!插图5

一般点击添加字体后会自动从右边弹出字体引用地址,如果没有弹出,请点击右上角查看添加的字体的按钮

给WordPress博客引用并调用Google字体!香!插图7

复制引用代码,如下图:

/*link引用*/
<link rel="preconnect" href="https://fonts-gstatic.lug.ustc.edu.cn">
<link href="https://fonts.lug.ustc.edu.cn/css2?family=Liu+Jian+Mao+Cao&family=ZCOOL+KuaiLe&family=Zhi+Mang+Xing&display=swap" rel="stylesheet">

 

/*import引用*/
<style>
@import url('https://fonts.lug.ustc.edu.cn/css2?family=Liu+Jian+Mao+Cao&family=ZCOOL+KuaiLe&family=Zhi+Mang+Xing&display=swap');
</style>

给WordPress博客引用并调用Google字体!香!插图9
把复制的引用代码添加到主题目录的头部文件header.php文件内,当然,也可以添加到底部文件footer.php内,不过为了及时加载字体,建议添加到头部文件。如下图,当然,也可以使用import方式引用

给WordPress博客引用并调用Google字体!香!插图11

接下来调用字体,这里说的是riplus主题,找到控制文章字体的元素,例如:article-content

给WordPress博客引用并调用Google字体!香!插图13
点击该元素所在的app.css文件,在该元素}字符前添加:font-family: 'ZCOOL KuaiLe', cursive;

即可看到字体已经变成我们所选择的字体啦

给WordPress博客引用并调用Google字体!香!插图15

文章标题、缩略图下方的标题的字体都可以按照这个方法进行更换字体哦

文章标题:

给WordPress博客引用并调用Google字体!香!插图17

给WordPress博客引用并调用Google字体!香!插图19

缩略图下方文章标题:

给WordPress博客引用并调用Google字体!香!插图21

给WordPress博客引用并调用Google字体!香!插图23

好啦,教程到此结束,如果想添加更多字体,只需在谷歌字体网站添加后更换引用地址就可以了,复制下方css代码调用新的字体即可。

温馨提示:站长个人感觉谷歌字体加载还是略慢(一般在1.5s以内),建议在谷歌字体网站下载源字体文件后转换为web字体格式后使用云存储引用,或者安装WP缓存插件,但是缓存前还是需要加载字体文件。

需要ttf、otf文件转换为woff、woff2的教程的小伙伴可以看:谷歌字体下载的otf、ttf字体文件转woff以及woff2文件教程

分享到 :
相关推荐

发表评论

Your email address will not be published. Required fields are marked *