写文章
拉里先森
2016-03-25 18:46
【WordPress字体】如何在WordPress中添加自定义字体(好文分享)

Mrhua在design上讲过,一个网站字体,小图标一些细节很重要,今天买了个主题,发现字体确实比较难看,所以就想怎么样才能自定义字体,结果发现了一篇好文,现在给大家分享。


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

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

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

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


用Typekit为Wordpress添加自定义字体

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

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

Add-Custom-Fonts-1.jpg


然后选择一个你想要使用的字体,点击所选字体下方的“+Use fonts”按钮如下图:
Add-Custom-Fonts-2.jpg
随后进入如下界面:

Add-Custom-Fonts-3.jpg


点击选择当前的工具箱,进入新的窗口,如下图:

Add-Custom-Fonts-4.jpg

在这个界面,需要我们做的有:

1、点击“Publish”按钮。

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

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

Add-Custom-Fonts-5-1024x553.jpg
然后添加如下代码到主题样式表中:

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的值)

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

.h1 site-title { font-family: "Arvo", Arial, sans-serif; }

(该代码的使用跟上述Typekit中类似代码的使用方法一样)

这篇教程就给大家介绍到这里,希望对您有所帮助。


举报
收藏
转发
0/500
添加表情
评论
评论 (2)
最近
最早

拉里先森

5年沉迷的外贸To B独立站营销,接下来更多的是深入研究To C领域,和系统化营销思维。喜欢思考,喜欢看书,喜欢游戏,欢迎私信交流。

向TA提问

举报

举报原因:

垃圾广告
人身攻击
抄袭侵权
违法信息
取消 确定

圈内转发

0/104

分享至微信

复制链接

举报

请选择举报理由

留联系方式
垃圾广告
人身攻击
侵权抄袭
违法信息
举报

确认要删除自己的评论吗?

取消 确定

确认要删除自己的文章吗?

取消 确定
提问
设置提问积分
当前可用积分:
-
+
20
50
100
200
偷看

积分偷看

10积分
我的积分(可用积分)
确认偷看

问题已关注

答主回复后,系统将通知你

不再提示