PageFly - Use custom fonts

283 views PageFly 1

Important: This feature is only available on the Pro plan

In this article, you’ll learn how to add the custom font and apply it to your PageFly page.

Step 1: Download and convert the font to a web font format

1.1 – Download the font

In our example, we download the font from www.dafont.com website. Let’s do it.

Download a desired font from dafont.com

After downloading the font you would see following files in the zipped folder. You’ll need to convert two files with extension “otf” and “ttf”.

All files in the zipped font folder

1.2 – Convert the font to the web font format

You need to visit the website https://transfonter.org/ and convert the font above.

Add fonts to be converted on transfonter.org

After uploading the font to that website please convert it. Tick the “WOFF” and “WOFF2” checkbox in Formats section.

Choose WOFF and WOFF2 then click Convert

Next, you would see the “download” link and click on it.

Download converted font

On your computer, there should be these 02 files with “woff” and “woff2” extension.

Downloaded WOFF and WOFF2 files

1.3 – Upload the font to your Shopify store and update

In your Shopify dashboard please navigate to Settings > Files

Navigate to Files in Shopify Settings

Then upload 02 font files to your store. Important: You will not be able to upload woff and woff2 files to your store if you are on the trial of Shopify.

Upload converted font files to your store

In the URL column please copy URLs of those fonts to your notepad or somewhere. We’ll use it later when we apply those fonts to PageFly page. In our example, the fonts URLs are:

Step 2: Apply the font to the PageFly page

2.1 – Open the font CSS file and replace it with Shopify font URLs

On your computer, find the font folder you downloaded in the previous part and look for the file “stylesheet.css” then open it. You can open that file with the Brackets.io or alternative app.

Open stylesheets.css file

After opening the file you’d see the code below.

You need to replace the URL for woff2 and woff files with the Shopify URL you got in the previous part. So in our case, it’ll be the code below. You’ll need to copy this piece of code to the Custom Code Editor of your page. Let’s do it.

2.2 – Open your PageFly page and click on Add Custom Code button

Where Custom code editor located

Copy the piece of code you got from the “stylesheet.css” file

Insert code to Custom code editor

Now you need to decide if you want to apply the custom font to the whole page or to the specific HTML tags.

2.3 – Apply the custom font to the whole page

2.4 – Apply the custom font to the specific HTML tags

For example, applying to the heading tags H1, H2, H3, H4, H5, H6 will be

Your result would be similar to the image below.

Result of applying custom font to your page