Use custom fonts

Note that this function is not applied for the Trial stores of Shopify

Before going to specific steps, you can watch this tutorial video

In this article, you’ll learn how to add custom fonts and apply them to your PageFly page.

Step 1: Download and convert the font to a web font formatClick to copy

Download the fontClick to copy

In our example, we download a font from Let’s do it.

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

Convert the font to the WOFF and WOFF 2Click to copy

You need to visit to convert the font above.

Click Add fonts to upload the 2 files above. Tick the “WOFF” and “WOFF2” checkbox in the Formats section.

Click Convert to see the “download” link and download.

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

Upload the font to your Shopify store and updateClick to copy

In your Shopify dashboard please navigate to Settings > Files

Then upload 2 font files: woff and woff2 to your store.

In the URL column please copy URLs of those fonts to your notepad or somewhere else. We’ll use them in Step 2.2 when we apply 2 fonts to our PageFly page. In our example, the fonts URLs are: 

Step 2: Apply the font to the PageFly pageClick to copy

Open the font CSS file and replace it with Shopify font URLsClick to copy

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 or alternative app.

  • After opening the file you’ll see the code below.

(embed this

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

(embed this

Open your PageFly page and click on Add custom Code buttonClick to copy

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

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

Apply the custom font to the whole pageClick to copy

(Embed this

Apply the custom font to a specific elementClick to copy

Select the element you want to be applied to the custom font. In this example, we choose the Heading element and we want to apply the custom for it.

In General > choose ATTRIBUTES parameter, put a name in Class. For example: custom-font. You can see the image below:

Then embed this

(replace *:not(.pfa) in Step 2.3 to .custom-font)

Please note that you shouldn’t choose any font from Styling > Typography > Font Family to make this code work.

If you have further questions, please join our community. This community is exclusive for PageFly merchants only with our experts and merchants from all around the world!



Thank you for your feedback!

Navigate this category

PreviousPrevious article

Could not find the answer to your question?

No worries, contact Our LiveChat Support 24/7

Contact PageFly LiveChat
PageFly Languagues

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

I got it!