Note that this function is not applied for the Trial stores of Shopify
Before going to specific steps, you can watch this tutorial video
在本文中，您将了解到如何添加自定义字体并将其应用于PageFly页面。
步骤 1：下载字体并将其转换为在线字体格式
1.1 – 下载字体
本示例中，我们从www.dafont.com下载字体。 请一起试一下。
下载字体后，您在压缩文件夹中看到下图所示的文件。 您需要两个扩展名为“ otf”和“ ttf”的文件转换。
1.2 – 字体转换成WOFF 和 WOFF2 在线字体格式
在 https://transfonter.org/ ，转换刚才的字体。
点击Add fonts上传刚才下载的2个文件。 选中格式部分中的“ WOFF”和“ WOFF2”复选框。
点击Convert后，可以看到“下载”链接。
下载后，可以看到扩展名为”woff“和”woff2“的两个文件。
1.3 – 上传字体到您的Shopify商店并更新
在Shopify仪表板中，请转到设置 > 文件。
然后上传 woff 和 woff 2 文件到您的商店里。
在URL列中，请将这两种字体的URL复制到记事本或其他地方。 将这些字体应用于PageFly页面时使用它们，将在步骤2.2中讲述。 本示例中，两个字体URL是：
https://pastebin.com/raw/SepA71rg
步骤 2: PageFly页面利用字体
2.1 – 打开字体CSS文件替换Shopify字体URL
在刚才下载的字体文件夹里，打开文件“ stylesheet.css”。 您可以使用Brackets.io或其他应用程序打开该文件。
- 里面的内容可能是这样的。
https://codepen.io/anon/pen/VEBGoq
- 请把woff2和woff文件的URL替换成我们在步骤1.3中得到的ShopifyURL（就像下面一样）。
https://pastebin.com/raw/SepA71rg
在本示例中，里面的内容应该变成这样。 (https://pastebin.com/raw/r6vbFYGE)
您需要将这段代码复制到页面的添加自定义代码中。下面继续讲解。
2.2 – 打开您的PageFly页面，然后单击添加自定义代码按钮
从“ stylesheet.css”文件中复制代码段：
(请参阅 https://pastebin.com/raw/r6vbFYGE)
下一步，您需要确定是否要将自定义字体应用于整个页面或特定元素。
2.3 – 将自定义字体应用于整个页面
(请参阅 https://codepen.io/anon/pen/YJjJPg)
2.4 – 将自定义字体应用于特定元素
选择要用到自定义字体的元素。 在示例中，我们选择标题元素应用自定义字体。
在面包屑导航栏上选择标题元素，在常规>选择属性参数，然后在类选项中填写一个名称。 比如：custom-font。如下图所示
然后潜入这个（请参阅https://pastebin.com/raw/hNn8xU1k）
(步骤 2.3 中的 *:not(.fa) 替换成 .custom-font)
请注意，不要从样式 > 排版 > 字体集中选择任何字体，来使用自定义字体。
Previous article
