WordPress网站添加自定义字体,很多时候自定义字体为了更好地用户体验以及增加网站美观,如何使用 Google Fonts、TypeKit 和 CSS3 @Font-Face 在 WordPress 中添加自定义字体?
注意:加载太多字体会降低网站速度。我们建议选择两种字体在网站上使用。我们还会讲解到如何在不减慢网站速度的情况下正确加载使用字体。
如何查找 WordPress 中使用的字体
很多字体以前是付费的,但是现在很多地方可以找到很多的免费字体,例如Google Fonts、Typekit、FontSquirrel和fonts.com。
从 Google Fonts 中,在 WordPress 网站添加自定义字体
Google Fonts 是网站开发中使用最多、免费且最常用的字体库。您可以通过多种方式在 WordPress 中添加和使用 Google 字体。
方法 1:使用 WordPress 插件添加 Google 字体
首先要做的是安装并激活 Google Fonts Typography插件,可以在wordpress后台插件搜索插件
接下来,需要在管理侧栏中的字体插件»自定义字体。
可以在“基本设置”为您的网站选择默认字体,并在“高级设置”下为您网站的特定部分选择字体。
“字体系列”下拉菜单可选择新字体。在顶部找到默认字体,然后是系统字体,最后是超过 1000 种 Google 字体库。
方法2:在WordPress中手动添加谷歌字体
此方法需要将代码添加到 WordPress 主题文件中。
首先,访问Google 字体库并选择您要使用的字体。接下来,单击字体下方的快速使用按钮。
在字体页面上,可以看到该字体可用的样式。选择要在网站中使用的样式,然后单击顶部的侧边栏按钮。
接下来,需要切换到侧边栏中的“嵌入”选项卡以复制嵌入代码。
有两种方法可以将此代码添加到 WordPress 网站。
首先,您可以编辑主题的 header.php 文件并将代码粘贴到<body>
标签之前。
但是,如果不熟悉 WordPress 中的代码编辑,可以使用插件来添加此代码。
只需安装并激活WPCode插件。
激活后,转到代码片段»页眉和页脚页面并将嵌入代码粘贴到“页眉”框中。
不要忘记点“保存更改”按钮来保存更改。这时候你会看到所有页面上加载新的字体。
也可以在主题的样式表中使用此字体,如下所示:
1
2
3
|
.h 1 site-title { font-family : 'Open Sans' , Arial , sans-serif ; } |
使用 Typekit 在 WordPress 中添加自定义字体
Adobe Fonts 的 Typekit是另一个免费和高级字体库的插件
只需注册一个 Adobe Fonts 帐户并访问“浏览字体”部分。从这里您需要单击</>
按钮来选择字体。
需要复制此代码并粘贴到网站的 <head> 部分中。
首先,可以编辑主题的 header.php 文件并将代码粘贴到<body>
标签之前。
但是,如果不熟悉 WordPress 中的代码编辑,那么您可以使用插件来添加此代码。
只需安装并激活WPCode插件。参考上面
使用 CSS3 @font-face 在 WordPress 中添加自定义字体
首先,需要在网络上下载喜欢的字体。如果下载的字体没有 Web 格式,则可以使用FontSquirrel Webfont 生成器对其进行转换。
下载字体文件后,需要将它们上传到您的WordPress 网站服务器。上传字体的最佳位置是在主题或子主题目录中的新“字体”文件夹中。
可以使用FTP或文件管理器来上传字体。
上传字体后,需要使用 CSS3 @font-face 在主题样式表中加载字体,如下所示:
1
2
3
4
5
|
@font-face { font-family : Arvo; src: url (http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf); font-weight : normal ; } |
不要忘记将字体系列和 URL 替换为你自己的。
之后,可以在主题样式表中的任何位置使用该字体,如下所示:
1
2
3
|
.h 1 site-title { font-family : "Arvo" , Arial , sans-serif ; } |
关于如何在 WordPress网站添加自定义字体,可以尝试以上几种方法,但是加载太多字体会影响网站速度,一般建议加载两种字体