![[Slider Revolution 6] Slider Revolution supports a wide range of Google Fonts. But you can also use apply a custom webfont.](https://aladd.net/wp-content/uploads/2020/05/download-webfont-1.jpg "[Slider Revolution 6]Slider Revolution支持多种Google字体，您也可以使用应用自定义网络字体。 1")
Slider Revolution支持多种Google字体。但是，您也可以使用应用自定义网络字体。
- 相关话题
- 添加/编辑图层
- 图层样式
- 自定义CSS / JS
特别说明：
如果您希望使用的Webfont已经被WordPress主题加载，请跳至 下面的第2 部分或第3部分。
第1部分
在此示例中，我们将使用FontSquirell中的 Open Sans字体。访问该链接后，单击“ Webfont工具包” 选项卡，然后单击“ 下载@ font-face工具包” 按钮：
![[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是，您也可以使用应用自定义网络字体。](https://aladd.net//wp-content/uploads/2020/05/download-webfont-1.jpg "[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是，您也可以使用应用自定义网络字体。")
接下来，解压缩下载的文件，然后打开名为How_to_use_web_fonts.html 的html文件，并查看本文档中的信息。
![[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是，您也可以使用应用自定义网络字体。](https://aladd.net//wp-content/uploads/2020/05/webfontkit2-1.jpg "[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是，您也可以使用应用自定义网络字体。")
接下来，单击下载的webfont 文件夹，然后单击opensans_bold_macroman 文件夹。在此文件夹中，您将看到以下字体文件：
![[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是，您也可以使用应用自定义网络字体。](https://aladd.net//wp-content/uploads/2020/05/webkit3-1.png "[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是，您也可以使用应用自定义网络字体。")
接下来，使用ftp程序将字体上载到您的网站。对于此示例，我们将在wp-content 目录中创建一个名为webfonts 的新目录。因此，字体将在此处通过ftp上传：
wp-content / webfonts /
接下来，在文本编辑器中打开“ stylesheet.css”文件：
![[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是，您也可以使用应用自定义网络字体。](https://aladd.net//wp-content/uploads/2020/05/webkit2-1.png "[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是，您也可以使用应用自定义网络字体。")
并将网址修改为绝对网址，以便从wp-content / webfonts / 目录中加载它们。这是一个例子：
@ font-face {
font-family：’open_sansbold’;
src：url（’http://www.site.com/wp-content/webfonts/OpenSans-Bold-webfont.eot’）;
src：网址（’http://www.site.com/wp-content/webfonts/OpenSans-Bold-webfont.eot?#iefix’）格式（’embedded-opentype’），
网址（’http：// www .site.com / wp-content / webfonts / OpenSans-Bold-webfont.woff’）格式（’woff’），
网址（’http://www.site.com/wp-content/webfonts/OpenSans-Bold- webfont.ttf’）format（’truetype’），
url（’http://www.site.com/wp-content/webfonts/OpenSans-Bold-webfont.svg#open_sansbold’）format（’svg’）;
font-weight：正常；
字体样式：正常；
}
接下来，将此CSS复制到计算机的剪贴板中，并将其粘贴到模块的“自定义CSS”部分中。
![[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是，您也可以使用应用自定义网络字体。](https://aladd.net//wp-content/uploads/2020/05/custom-css-section-1-3.jpg "[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是，您也可以使用应用自定义网络字体。")
![[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是，您也可以使用应用自定义网络字体。](https://aladd.net//wp-content/uploads/2020/05/custom-css-font-1.jpg "[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是，您也可以使用应用自定义网络字体。")
第2部分
要将字体正式应用于您的文本图层之一，请在编辑阶段选择“图层”，然后在“属性”部分中添加一个唯一的类。
![[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是，您也可以使用应用自定义网络字体。](https://aladd.net//wp-content/uploads/2020/05/add-custom-class-1.jpg "[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是，您也可以使用应用自定义网络字体。")
然后打开自定义CSS模式，并使用“！important”声明将字体应用于类。
![[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是，您也可以使用应用自定义网络字体。](https://aladd.net//wp-content/uploads/2020/05/apply-custom-font-1.jpg "[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是，您也可以使用应用自定义网络字体。")
第三部分
导航到“ 全局设置”，然后找到“ 在编辑器中启用自定义字体选择 ”选项
![[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是，您也可以使用应用自定义网络字体。](https://aladd.net//wp-content/uploads/2020/05/custom-font-1.png "[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是，您也可以使用应用自定义网络字体。")
在文本框中插入“字体家族”名称。
示例：CustomA，CustomB
![[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是，您也可以使用应用自定义网络字体。](https://aladd.net//wp-content/uploads/2020/05/font-family-1.png "[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是，您也可以使用应用自定义网络字体。")
然后，“字体家族”将出现在“文本层”>“样式”>“字体家族”下拉列表中
![[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是，您也可以使用应用自定义网络字体。](https://aladd.net//wp-content/uploads/2020/05/text-layer-15.png "[Slider Revolution 6] Slider Revolution支持多种Google字体。 但是，您也可以使用应用自定义网络字体。")
![[Slider Revolution 6]Slider Revolution支持多种Google字体，您也可以使用应用自定义网络字体。 6](https://aladd.net/wp-content/uploads/2020/05/background-image-2-120x68.jpg "[Slider Revolution 6]Slider Revolution支持多种Google字体，您也可以使用应用自定义网络字体。 7")
![[Slider Revolution 6]Slider Revolution支持多种Google字体，您也可以使用应用自定义网络字体。 7](https://aladd.net/wp-content/uploads/2020/05/iframe-text-1-120x68.png "[Slider Revolution 6]Slider Revolution支持多种Google字体，您也可以使用应用自定义网络字体。 8")
评论