使用自定义字体

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

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

Was this helpful?

Try out all PageFly features with Free plan

.myshopify.com
Don’t have Shopify store yet? Create store
×

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

I got it!
Languages