如何在WordPress中添加自定义字体

自定义字体可以使网站变得新颖，并使它脱颖而出。相信许多用户都想要为自己的网站添加自定义字体。今天我们将通过这篇教程为大家介绍运用Typekit和CSS3@Font-Face method

在Wordpress主题中添加自定义主题已经成为一种普遍的趋势。实际上有的主题中加载了很多的自定义字体。但是加载太多的字体会使得你的网站变慢。所以今天我们要跟您分享正确加载自定义字体的方法，不至于使得网站变慢。

在添加自定义主题之前，我们首先要了解如何获取自定义主题。

付费字体一般都比较贵，但是我们可以在很多地方找到免费字体，比如：Typekit，FontSquirrel，fonts.com 等。

WordPress中添加自定义字体

Typekit中有付费和免费的字体，你可以使用付费的订阅也可以使用有限的免费的订阅。

首先注册Typekit账号并登陆，然后创建一个新的工具包：

然后选择一个你想要使用的字体，点击所选字体下方的“+Use fonts”按钮

如何在随后进入如下界面：

点击选择当前的工具箱，进入新的窗口，

在这个界面，需要我门做的有：

1、点击“Publish”按钮。

2、点击右上角Embed Code选项和左边栏中第一项中的Usingfonts in CSS按钮，复制界面中出现的两行Embed Code代码和要用到的CSS代码到txt文件并保存（之后会用到）。

然后回到你的WordPress管理界面，点击进入安装插件界面，安装并启用 Typekit Fonts for WordPress 插件。插件启用完成后，点击设置目录下的TypekitFonts选项，然后复制之前保存的Embed Code代码到插件设置界面，

然后添加如下代码到主题样式表中：

h1 .site-title {

font-family: 'modesto-condensed', Arial,sans-serif

}

(代码中的’modesto-condensed’，是随着选择字体的不同而不同的。该信息在之前txt文件中有保存。)

还可以通过修改大括号之前的内容来设置运用字体的位置。

用CSS3@font-face在WordPress中添加自定义字体

运用CSS3@font-face是添加WordPress自定义字体最直接的方法。

首先你需要下载你喜欢的字体，并在你的主题或子主题目录下新建一个文件夹，命名为“fonts”然后上传字体到该文件夹。上传完成后，你还需要用CSS3@font-face将字体加载到你的主题样式表中，代码如下：

@font-face {

font-family: Arvo

src:url(http://www.example.com/wp-content/themes/your-theme/fonts/Arvo-Regular.ttf)

font-weight: normal

}

（不要忘记修改代码中font-family和url的值）

加载完成后我们将可以通过如下代码实现对字体的使用。

打开Mac电脑里的访达程序，在屏幕顶部的菜单栏里，点击前往，选择下拉菜单中的“应用程序”，在d窗里找到“字体册”双击打开；字体册打开后，再次点击屏幕菜单栏中的“文件”，在下拉菜单中选择“添加字体”，在d出的窗口中，找到字体并选择想要安装的字体，点击右下角的“打开”按钮；等待字体导入，完成后即是添加成功。

字体在我们做设计中占了很大一块儿，那么如何在系统中安装自己想要的字体库呢？

方法如下：

1.先下载你要加的文字库，这里我下载的是方正字体，扩展名是.dmg。

2.把刚下载的方正字库的文件，直接点击安装，安装完后，把字体拖到“应用程序”里就可以了。

3.然后，打开“应用程序”窗口，找到“字体册”文件夹，双击打开。

4.现在，显示的就是字体的所有文字，你可以根据自己的需要，新建组名进行管理。

5.最后，点击右键，d出菜单，选择“添加字体”，选择你刚加入的字体，就安装成功了。

---