如何在 Elementor 中轻松添加和使用自定义字体

Elementor 中的自定义字体是什么?

如何在 Elementor 中轻松添加和使用自定义字体

Elementor 中的自定义字体允许你在页面构建器上添加自托管和 Adobe 字体,并将它们用于你的网站内容。通过自定义字体,可以轻松上传任何字体,并修改其特征,为网站创建独特的品牌字体样式。

还可以通过集成 Adobe Typekit,将 Adobe 字体添加到 Elementor 中,并同步和使用所有 Typekit 字体。

支持的自定义字体格式

Elementor 支持以下五种自定义字体格式:

  1. Web 开放字体格式(WOFF):这是最流行且最推荐的字体格式,受到大多数现代浏览器的支持。
  2. Web 开放字体格式 (WOFF 2.0):此文件支持 OpenType 和 TrueType 字体,并提供比 WOFF 更好的压缩效果。
  3. SVG 字体:SVG(可缩放矢量图形)是一种基于 XML 的矢量图像格式,用于定义 2D 图形文件。这种格式对于在文本中显示 SVG 字形特别有用,尤其是在旧版 iPhone 上。
  4. TrueType 字体(TTF):由微软和苹果在 20 世纪 80 年代开发的一种字体格式。
  5. 嵌入式 OpenType 字体 (EOT):由 Microsoft 设计,支持 IE。

哪里可以下载 Elementor 的免费自定义字体?

  • Google 字体
  • Dafont
  • Font Squirrel
  • Urban Fonts
  • FontSpace

要下载这些字体,只需点击喜欢的字体上的下载按钮,解压缩文件夹,然后选择合适的字体格式。完成后,就可以将字体上传到 WordPress 并在 Elementor 中使用了。

如何向 Elementor 添加自定义字体

如何在 Elementor 中轻松添加和使用自定义字体

无论使用的是 Elementor 免费版还是高级版,都可以轻松为网站添加自定义字体。不过,Elementor 中内置的自定义字体功能仅适用于 Elementor Pro。如果使用的是免费版本,可以通过使用 WordPress 插件或安装 Nexter 主题来实现。

以下是向 WordPress Elementor 中添加自定义字体的详细步骤。

步骤 1:向 Elementor Pro 添加自定义字体

如果在使用 Elementor Pro,可以利用其内置的自定义字体功能。以下是具体步骤:

  1. 进入自定义字体设置
    • 在 WordPress 仪表板中,导航到 Elementor > 自定义字体
    • 点击“添加新字体”按钮,开始添加新的自定义字体。
如何在 Elementor 中轻松添加和使用自定义字体

输入字体系列名称。可以选择任何自定义名称 。

如何在 Elementor 中轻松添加和使用自定义字体

步骤 2:添加字体变体并上传字体

  1. 在自定义字体页面中,点击“添加字体变体”。
  2. 添加字体名称,并上传不同格式的字体文件,如 WOFF、WOFF2、TTF、SVG 和 EOT。
  3. 可以从网上的各种字体目录中下载所需的字体文件。
如何在 Elementor 中轻松添加和使用自定义字体
  1. 通过设置自定义字体的粗细和样式,可以为单个字体添加多种变体。
  2. 对于每个添加的字体格式和变体,分别上传相应的字体文件。
如何在 Elementor 中轻松添加和使用自定义字体

步骤 3:发布最终字体

从媒体库上传字体文件后,点击“发布”按钮。该字体现在可以在 Elementor 中使用。

步骤 4:在 Elementor 网站上使用自定义字体

  1. 在 Elementor 页面构建器中,打开任何包含文本的小部件。
  2. 导航到该文本小部件的“样式”部分。
  3. 在排版设置下,选择您上传的自定义字体。
  4. 根据需要调整字体大小、样式、粗细、装饰等,使其与你的网站设计保持一致
如何在 Elementor 中轻松添加和使用自定义字体

方法 2:如何免费向 Elementor 添加自定义字体?

在 Elementor 免费版中添加自定义字体需要一些额外的工作,因为它不内置自定义字体功能。要实现这一点,需要一个支持自定义字体文件的插件或 WordPress 主题。POSIMYTH Innovations 的 Nexter 主题包含自定义字体功能,并与 Elementor 无缝集成。

以下是使用 Nexter 主题向 Elementor 添加自定义字体的方法。

步骤 1:安装 Nexter 主题和扩展

  1. 在 WordPress 仪表板中,导航至外观 > 主题 > 添加新主题
  2. 搜索并安装 Nexter 主题。
  3. 点击“安装 Nexter 扩展”并激活插件。
如何在 Elementor 中轻松添加和使用自定义字体

步骤 2:启用自定义字体功能

  1. 激活主题后,前往 WordPress 仪表板上的外观 > Nexter 设置 > 额外选项
  2. 查找并启用自定义字体上传选项。
如何在 Elementor 中轻松添加和使用自定义字体

步骤 3:下载自定义字体文件

  1. 从任何免费字体目录网站(如 dafont.com)下载自定义字体文件。
  2. 找到与你的设计和品牌形象相符的字体,点击下载并解压缩下载的 zip 文件。
如何在 Elementor 中轻松添加和使用自定义字体

步骤 4:上传自定义字体

  1. 前往 Nexter 设置页面,点击自定义字体上传选项下的设置图标来导入你的字体。
  2. 选择“简单字体上传”以一次上传单个字体文件,或选择“可变字体上传”以上传字体的多种变体(如粗体、斜体等)。
如何在 Elementor 中轻松添加和使用自定义字体
  1. 输入字体名称,从系统上传字体文件,选择变体,然后点击保存字体。
如何在 Elementor 中轻松添加和使用自定义字体

步骤 5:在 Elementor 网站上使用自定义字体

  1. 打开 Elementor 页面构建器,进入正在编辑的页面。
  2. 导航至样式 > 排版,选择上传的自定义字体。
  3. 自定义字体设置,包括大小、间距、样式、字母高度等,使其与你的网站设计保持一致。
如何在 Elementor 中轻松添加和使用自定义字体

总结:

本文详细介绍了无论你使用 Elementor Pro 还是免费版本,都可以通过本文提供的分步指南,轻松实现自定义字体的集成和应用。对于 Pro 用户,可以利用内置的自定义字体功能,而免费用户则可以通过 Nexter 主题来实现相同的效果。通过这些方法,可以为你的网站创建独特的品牌字体样式,使其与的设计和品牌形象保持一致。

如何在 Elementor 中轻松添加和使用自定义字体

联系我们
文章看不懂?联系我们为您免费解答!免费助力个人,小企站点!
电话:020-2206-9892
QQ咨询:1025174874
邮件:info@361sale.com
工作时间:周一至周五,9:30-18:30,节假日休息
发布者:光子波动,转转请注明出处:https://www.361sale.com/11390/

(2)
上一篇 2024年 6月 16日 上午11:55
下一篇 2024年 6月 17日 上午10:23

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注

联系我们

020-2206-9892

QQ咨询:1025174874

邮件:info@361sale.com

工作时间:周一至周五,9:30-18:30,节假日休息

客服微信