使用自定义字体

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仪表板中,请转到设置 > 文件

然后上传 woffwoff 2 文件到您的商店里。

URL列中,请将这两种字体的URL复制到记事本或其他地方。 将这些字体应用于PageFly页面时使用它们,将在步骤2.2中讲述。 本示例中,两个字体URL是: 

https://pastebin.com/raw/SepA71rg

步骤 2: PageFly页面利用字体

2.1 – 打开字体CSS文件替换Shopify字体URL

在刚才下载的字体文件夹里,打开文件“ stylesheet.css”。 您可以使用Brackets.io或其他应用程序打开该文件。

using custom fonts

  • 里面的内容可能是这样的。

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页面,然后单击添加自定义代码按钮

custom fonts

从“ stylesheet.css”文件中复制代码段:

(请参阅 https://pastebin.com/raw/r6vbFYGE)

custom fonts pagefly

下一步,您需要确定是否要将自定义字体应用于整个页面或特定元素。

2.3 – 将自定义字体应用于整个页面

 (请参阅 https://codepen.io/anon/pen/YJjJPg)

pagefly custom fonts

2.4 – 将自定义字体应用于特定元素

选择要用到自定义字体的元素。 在示例中,我们选择标题元素应用自定义字体。

在面包屑导航栏上选择标题元素,在常规>选择属性参数,然后在选项中填写一个名称。 比如:custom-font。如下图所示

use custom fonts of pagefly

然后潜入这个(请参阅https://pastebin.com/raw/hNn8xU1k

(步骤 2.3 中的 *:not(.fa) 替换成  .custom-font)

use custom fonts

请注意,不要从样式 > 排版 > 字体集中选择任何字体,来使用自定义字体。

Navigate this category

PreviousPrevious article

Next articlePrevious

Feedback
Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
PageFly Languagues

PageFly Help Center is now available in Chinese & French. Please check the flags on the page header.

I got it!
Explore how you can use PageFly to win this Christmas and Year-end sales Check now