How to Add Custom Font in PageFly

1. About Uploaded FontsClick to copy

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

Please note that you can use all Google Fonts in PageFly without uploading them in the  Uploaded fonts manager! You can see and apply all Google Fonts here:

custom font in PageFly

The Uploaded Fonts Manager is a feature that allows you to upload and manage your desired fonts but Google fonts don’t have.

There are 4 supported formats: TTF, OTF, WOFF, WOFF2

After you upload custom fonts, all fonts will be automatically converted to WOFF2 format to optimize the page performance in the Live view.

You can check more details in the video tutorial below:

IMPORTANT NOTE: If you are in the Shopify Trial Plan, you can’t upload your fonts in the Uploaded Fonts Manager due to the Shopify’s file format requirement. Please check this article to learn more about this policy.

2. Access Uploaded Fonts Manager

To access this feature, head to the PageFly dashboard > Click on Extra functions > Select Manage in the Uploaded fonts section.

custom font in PageFly

3. How to Upload Custom Fonts?

After accessing the Uploaded Fonts Manager, click the Upload font button to start adding your fonts.

custom font in PageFly

4. How to use custom fonts in PageFly?

After adding custom fonts in the Uploaded Fonts Manager, please go to Global Styles.

Here you can select your common use fonts for the Font Family parameter:

  • Step 1: Click on the Font family > Go to Styling tab on the right sidebar.
  • Step 2: Hit the Setting icon.
  • Step 3: Click on Uploaded fonts in the popup > Select fonts that you want > Hit Select button.

custom font in PageFly

  • Step 4: Then click on the dropdown menu to select the fonts for each Font Family type.

custom font in PageFly

Finally, don’t forget to hit the Publish button on the top right!

custom font in PageFly

​​Then get back to the Editor page > Choose the Global Styles option to apply the new fonts.

custom font in PageFly

6. Frequently Asked Questions

After uploading, can I use the custom font directly in the editor page and not use the Global Styles?

Answer: No, you must add the custom font in Global Styles feature then apply in the editor page.

custom font in PageFly

6.1. Can I use custom code to add new fonts?

  • Answer: Yes, but we are not suggesting that you do it.  

6.2. I have used custom code to add a font before, should I delete the code first then upload the font in the Uploaded Fonts Manager?

  • Answer: Yes, you should delete the code then upload the font in the Uploaded Fonts Manager and continue to use it as normal.

6.3. If I delete a custom font that is used in a page, will it affect the Live page?

  • Answer: No, if you delete the custom font, elements have been applied the font will show with the font of its container. You can learn more about it here.

Navigate this category

Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
Boost your holiday sales with PageFly's Thanksgiving Template 👉 Discover Now