2018年6月13日更新
在本教程中我们将讨论如何添加谷歌字体和其他公司的红利网站字体一样。你的设计不需要是有限的。看看我们前三种方法在你的网站上使用自定义字体!
添加自定义字体,你的网站是一个伟大的方式从激烈的竞争中脱颖而出并添加自己的自定义和创造性才能到你的网站。添加字体是一个相当简单的过程但恐慌很多是因为有一些非常小,但是很简单,编码。
使用谷歌字体的区别与其他自定义字体(。ttf, .otf或.woff文件)非常简单。在谷歌字体,字体是存储在谷歌的服务器上,你使用代码将从他们的文件。对于所有其他字体,你下载的字体从自己的FTP文件服务器和拉。
1)直接上传建设者
步骤1。打开红利Visual Builder和去任何设计部分显示一种字体
步骤2。点击“上传”,按提示操作
点击在这里为更多的信息。
2)添加谷歌字体
*这是我们推荐的方式添加字体*
步骤1。选择你的字体
(注意:确保这不是一个字体已经集成了红利的主题)去Google.com/fonts选择一个字体,补充你的网站的风格。在这个例子中,我们选择“音乐棒极了”。点击快速使用图标,向下滚动并复制集成代码。在我们的例子中,我们复制:
<链接的href = ' https://fonts.googleapis.com/css?家庭=大+共鸣的rel =样式表”类型=“文本/ css”>步骤2。添加标题的代码
去红利主题选项> >现在将代码粘贴到集成头(身体),并保存。
步骤3。字体分配给类、标签和元素
回到你的谷歌页面的字体,向下滚动到“4:字体融入你的CSS”,复制代码。在我们的例子中,我们复制:
草书字体类型:“音乐棒极了”;
现在分配红利中的元素主题选项>一般>自定义CSS。例如,如果我想要头1和2有新的谷歌字体,我们将使用:
h1, h2 {
草书字体类型:“音乐棒极了”;
}
如果你有不同的字体为每个标题,重复这些步骤是必要的。例如,如果我想让身体有字体题为“例子”,为新字体复制步骤1中的代码和添加CSS的身体:
身体{
草书字体类型:“例子”;
}
3)Typekit
步骤1。上传TypeKit字体WordPress插件
步骤2。去TypeKit.com和注册一个账户
步骤3。选择一些字体添加到你的账户,他们同步(如果你希望他们在本地机器上),并添加一个工具包
步骤4。从设备获取嵌入代码
第5步。嵌入代码添加到插件
步骤6。继续和发布TypeKit工具包
步骤7。点击“使用CSS中字体”在左上角“选择器”和复制的例子风格
步骤8。将CSS规则粘贴到插件,添加任何你想要的更多并保存!
第9步。选择所有元素现在将显示为字体!
4)“使用任何字体”插件(不推荐)
*我们不再建议使用“使用任何字体”由于兼容性问题。*
在这里是更新的视频如何使用插件。现在您可以使用这个插件来直接发送您的自定义字体红利建设者!不需要任何CSS知识!
步骤1。选择你的字体
我们选择乔治娜。ttf -下载.ttf .otf。或.woff文件到您的计算机。
步骤2。下载插件使用任何字体
登录到你的WordPress站点,去“插件”下载并安装插件”使用任何字体“从WordPress插件部分。一旦激活,点击“使用任何字体“在你的WordPress菜单。
步骤3。API密匙
现在你必须创建一个API密钥激活插件。只需单击添加一个键,选择“0”选项如果只使用1字体(最少需要10美元超过一种字体)。API键粘贴复制到API键部分并单击“验证”。
步骤4。上传和指定的字体
点击“添加字体”,上传你.ttf, .otf,或.woff文件。(免费版本只允许一种字体上传)。
现在我们需要分配这些字体到正确的类,标签,和元素。简单地选择你的字体,然后点击字体分配的标签。在本例中,我们应用自定义字体的标题,菜单项为桌面和移动,和按钮。
第5步。分配给菜单,头和身体
找到自定义字体后,谷歌字体列表(仅在主题编辑器)
步骤6。从红利分配自定义字体建设者
从编辑指定字体内容。自定义字体将出现在列表的顶部。
感谢这个伟大的文章。
我不使用这个插件。我创建了一个新的字体文件夹在我的红利主题和上传webfonts直接通过我的ftp服务器。我需要手动指定字体到正确的类,标签和元素让他们正常工作吗?我这样做哪里?
凯,我将添加一个CSS类的任何元素你想使用自定义字体。你会需要写webfont CSS系类的字体。您可能需要使用”!重要”标签。所有这些CSS将红利主题的选择区域。
希望这可以帮助!祝你有美好的一天!=)
谢谢你,很有帮助。手动可以做到,但这是更容易和立即工作。现在只需要目标其他类需要的地方。
谢谢你的好文章,但这是一个没有追求我。
这个插件至少可以说是一个挑战!
我不想花10美元,不知道如果这是去工作所以我也免费版,现在我有一个字体,我无法摆脱,得到一个新的API键不起作用。卸载程序,并试图添加新的字体不工作。旧的还显示,新一个没有。小时后它仍然不工作,我在寻找另一种选择。
抱歉你遇到问题!乍一看,这听起来像是有一个缓存问题。你有一个缓存插件安装吗?我建议去活化,然后清理浏览器缓存。如果不工作,随时通过我们的联系页面与我们联系,我们会拍摄更多麻烦。希望会有帮助!
嗨
真正有用的信息,谢谢!
使用红利你能告诉我如果我可以分配我上传字体菜单文本以及如何这样做吗?
提前谢谢!
哦对不起你回答这个已经在你文档.nav之上
再次感谢
嘿,悬崖,你用字体使用任何插件或谷歌字体?无论哪种方式,你需要指定字体通过CSS类。例如,在我们Josefin主题:http://josefin.madebysuperfly.com/
CSS改变导航将是:
# et-top-navigation {
字体类型:“Josefin无”,无衬线!重要;
}
我要评论就说声谢谢!
我一直试图让我的CSS工作几个小时但谢谢你发现我不见了”!重要”标签。真的没有其他博客提到任何关于这个!WTF ? !
欢呼的兄弟
Alright! Glad it served you well!
嘿家伙,真的很有帮助。我们建立一个新的婚礼具体网站但是标准字体在股息不给选择的深度。
谢谢,还要开车!让我们知道如果有什么你想看到改善。我们爱的反馈!
从德国喂,这正是我在寻找的。只有一个问题。我安装了一个字体称为“Gobold薄。ttf字体使用任何插件和CSS代码放置到红利Gerneral选项。是一个奇怪的事情,我注意到,每个词的第一个字母是一个小小的一点比其余的字母。怎么能这样呢?
嘿Murat,德国!Very cool! Where can I look to see this issue? My guess would be if you set all text to uppercase, it will work (either manually or with CSS). Sometimes if you capitalize the first letter of a font that’s already all caps, it looks a little funky. Also, this post is currently being updated by our team. There was a Use Any Font plugin update that works quite a bit better with Divi. More updates coming soon!
嘿,杰克,酷到这里。这是给你,这样你就可以看。非常感谢你
http://easysylt.de/
甜的。是的,看起来像我之前工作的解决方案。首字母:大写;CSS规则将解决这个问题。
哦,如此简单,哈哈。非常感谢,很酷的页面,会定期拜访你。再见
你好,我无法得到詹娜苏字体在股息与使用任何字体和我端并´t真正像你描述。任何建议吗?
Maritha
Hey Maritha, thanks for reaching out! Hmm… without logging in to the back end of your site or looking at screenshots, it’s tough to say. I’d recommend reaching out to the “Use Any Font” support team here:https://wordpress.org/support/plugin/use-any-font
嗨,杰克,他放弃了在使用任何字体。就´t找出为什么它并´工作。
抱歉,Maritha !如果开发人员不能算出来,似乎在我们的领域。从这篇文章我们已经考虑移除这个插件给很多人造成一些麻烦。请保持更新!我建议接触一些红利Facebook群组。在Facebook搜索“红利主题”
还有其他的插件?
马斯,
有一些,但不是我们广泛测试。我建议坚持谷歌字体和TypeKit如果可以的话。
插件似乎发挥了作用,但它是生成一个错误:
2未能加载资源:服务器回应状态400 fonts.googleapis.com/css?family=gotham-bold:400(错误请求)
伊恩,你需要接触的人开发这个插件:https://wordpress.org/plugins/use-any-font/
我们会从这篇文章删除使用任何字体的建议。对许多人来说似乎是失败。
得到一个API密匙是不容易的。我想测试这个在我买之前我试图得到一个免费的,它没有工作。我做错了什么?
简,
“使用任何字体”插件,您需要向他们伸出我们的手:https://wordpress.org/plugins/use-any-font/
我们在编辑这篇文章的过程中移除插件从我们的建议。
我的字体我添加和使用任何字体不是出现在标题的下拉。我需要将它分配给一些让它这样做呢?如果是这样我放在自定义字段的到底是什么?
问题“使用任何字体”插件,您需要联系他们的开发人员:https://wordpress.org/plugins/use-any-font/
发现字体不会加载红利Visual Builder。你必须去正常的后端红利建设者,他们就会出现。
明白了。这是有帮助的。谢谢,克里斯多夫!
我想添加一个自定义字体avenir光在我的红利主题菜单项。
我alredy安装使用任何字体和字体添加正确使用api密钥。
问题是在我的主题编辑器字体是不可见的。
我需要添加css类将字体菜单项。
那么我菜单的css类。我不能算出来后很难。
请给我关于这个问题的建议吗?
谢谢你! !
嘿,泰姬,我相信有一个类似的问题上面的字体不会出现在Visual Builder(或主题编辑器)。使用任何字体插件的问题,我接触到开发人员:https://wordpress.org/plugins/use-any-font/
为你的菜单,这可能是一个更具体的为所有你必须让它的身体类型,然后选择和取消选择哪些元素包含在你的CSS样式表。
只是字体visual builder和visual builder,因为我不知道如何检查如果字体真的改变了。
莉迪亚,我建议与优雅的主题更详细的问题。我们不是隶属于他们以任何方式。然而,检查是否一个字体,预览,你会看到如果变化。
只是一个通知你在使用任何字体(UAF)。我可能做错了什么,但无论字体我分配一个标签(H1, H3、身体等)通过UAF红利字体覆盖其他字体的主题编辑器(DTC)。所以一旦我通过UAF分配一个字体,显示下拉菜单的DTC无用。如果我分配多个字体,过去的字体我分配成为占主导地位的(缺乏一个更好的描述)字体。
任何人遇到呢?
发现这个问题。不要在UAF分配一个字体,除非你想要覆盖所有其他字体的字体元素(标签)的分配。例子…我上传的种族优越感的字体和分配我的头元素(标签)。这意味着无论什么字体DTC我从下拉选择,只有种族优越感的会显示在标题元素分配。没有其他的字体是可行的。然而,当我刚上传UAF的字体,没有分配,任何字体,包括种族优越感的,可以利用在DTC的头元素从下拉菜单中选择。希望是有意义的。
谢谢你的言语!干杯!
谢谢你的言语!感谢。
我没有看到选择上传红利Builder的字体。我点击“文本”模块,什么都没有。
嘿,丽塔,确保红利更新到最新版本,你使用Visual Builder(不是后端构建器)。然后按以下步骤列在这里。这里有更多的信息:https://www.elegantthemes.com/blog/theme-releases/divi-font-options-update
这仍是一篇好文章和作品。我想补充,唯一的警告是当你添加你的定制类字体应该做他们的股息红利设置页面自定义CSS窗格或在WP自定义CSS特性。
使用红利和试图在风格。css在我的孩子主题不会工作,似乎红利将覆盖相关的字体设置。
人,谢谢你的建议!是的,同意了。CSS通常是最好放置在红利>选项>自定义主题CSS。
所以我很好奇为什么红利不允许你上传字体有时“出于安全考虑”。通常我却可以上传ttf 99/100,但其他版本没有工作。今天我遇到的问题ttf不工作…嗯想知道为什么。
相同。我使用了功能。php从本文方法修复它,并允许我上传的字体:
https://www.elegantthemes.com/blog/wordpress/how-to-fix-the-sorry-this-file-type-is-not-permitted-for-security-reasons-error-in-wordpress
在我上传的字体,我删除了代码的功能。php文件。
希望这可以帮助!