# How to Add Custom Font in PageFly

### Overview

In this article, you will discover how to [enhance your PageFly pages with custom fonts](https://help.pagefly.io/manual/how-to-add-custom-font-in-pagefly/) using the Uploaded Fonts Manager. This feature enables the upload and management of unique fonts that are not available in Google Fonts, allowing for more personalized and distinctive page designs.

### Requirements

* Before using in PageFly pages, custom fonts must be added into [Global Styling](https://help.pagefly.io/manual/global-styling-feature/).

{% hint style="warning" %}
**Important Note**:

* It's essential to note that PageFly already includes all Google Fonts, which do not require uploading through the Uploaded Fonts Manager.
* Upon uploading, custom fonts are automatically converted to WOFF2 format, optimizing performance in the live view.
* PageFly supports 4 font formats: TTF, OTF, WOFF, and WOFF2.
* Users on Shopify's Trial Plan cannot upload fonts due to Shopify’s file format restrictions. For more details on this policy, please refer to this [Shopify article](https://help.shopify.com/en/manual/shopify-admin/productivity-tools/file-uploads%23file-format-requirements).
  {% endhint %}

### How To Use Custom Fonts In PageFly

For a more visual guide on how to apply a custom font style within Global Styles, please refer to the accompanying video tutorial below:

{% embed url="<https://youtu.be/0eUZzTbRLoE>" %}

#### Step 1: Access Uploaded Fonts Manager

Navigate to the PageFly dashboard > select **Extra Functions** > choose “**Manage**” in the “**Uploaded Fonts**” section to access this feature.

![](/files/QBfPl0nbjl8cYDmkGSTI)

#### Step 2: Upload Custom Fonts

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

![](/files/pm1Yr3NwVsofRiD9uNht)

#### Step 3: Apply Custom Fonts In Global Style

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:

1. Go to the “**Extra functions**” page, then click the “**Manage**” button next to Global Style.

![](/files/XSZ71o0btkMJMaI6ttI5)

2. Select the **Typography** parameter by clicking on it, then proceed to the **Styling** tab > **Font Family**.

![](/files/HyZNkoVmWyx4R1DysNZ3)

3. Click the **Settings** icon, choose **Uploaded Fonts**, select your fonts, and confirm with the **Select** button.

![](/files/nFmqf41LgTHjqkQpu74Y)

4. Use the dropdown menus in the Font family to assign fonts to the Typography type.

Remember to hit “**Publish**” after you are don assigning the fonts for each typography type.

![](/files/2us0USXNi1ZcW5L0B05Z)

5. Use Typography style for Elements in Global Styles

To apply a custom font style within Global Styles, simply select the element you want to customize (such as a Heading, Paragraph, or Button) from the '**Elements**' section. Then, navigate to the '**Typography**' section under the '**Styling**' tab and choose the predefined custom font style you wish to use.

![](/files/WTopvlYRPqJpqHPysrrY)

6. Remember to publish your changes by clicking the Publish button.

![](/files/DzjT1KMq1K5j3N5T05O3)

#### Step 4: Use Custom Fonts In PageFly Pages

​​Return to the Editor, from Global Styles in the Styling tab, choose the Style for the elements.

![](/files/khYwcApMVUr40uBGLxk2)

### Use case: Use the Shopify Theme Font

We can use the Shopify theme font directly from PageFly Editor following some guidelines below:

* We can select Shopify theme fonts directly from the PageFly editor:

Click Styling tab => In the Typography, choose Shopify theme fonts

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXencPvC6nGsoX2ErCzyrBb9WcSv0_5EM9xl4c0TTLFANaoSA6y5-ACYfJouAZw3ZE4VtiuBWLfsyLloxkIbWqTcE1OyzubtvXgR1xvCzrqR0xKWan_jFdi_1yxtDpaEqomGOMjA?key=npJtmwEeOk_yd-Q0eipI5A" alt=""><figcaption></figcaption></figure>

* The Theme font setting will automatically update with the font setting in the PageFly editor If you choose Shopify theme fonts.

Select theme font setting in your Shopify theme editor => Save it => Reload the PageFly editor page => Theme theme font setting will automatically sync to the PageFly editor page.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXe78g1mG6KfU89V5FaCz78wmkwkkcWO53eHPXisiolzoT6z4voB-GkR30TAKHJVBnSOxNtg2mDym6V2cL_R3sbavhHEUnNJg2iFZZdOMjjePKJEJUPVBDDING3mJE95nS62HaGF5A?key=npJtmwEeOk_yd-Q0eipI5A" alt=""><figcaption></figcaption></figure>

* Some settings in the PageFly editor will disappear If the Shopify theme font has this setting before. The example here is Bold and Italic.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXfLhHR0rCJ4GiC2aNg6v8OF9y9fTpPTWfRThRShwk-i5ftDhY9B4ldD2ii5erMdebtsMAHAEjKaZUGXJF6iZXVlw8JlKeuC_kQE9KnqCtB6AITGHU2GI3tO5X9YZbYjIFEsMPZCTw?key=npJtmwEeOk_yd-Q0eipI5A" alt=""><figcaption></figcaption></figure>

* If we reselect the Google font from the PageFly editor, we can continue to change the text styles and set the Shopify theme font disabled before.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXf05u7-Zd0WOSB7PMdAQWfeMNg2114WhTEmBoi1T07qmG4RduUpm3yiUifmwH-Vau3s-_rOhPLRrmwwBEDA7kOGqMtnqtiqf2r7BIzjI65Ul5W0fzrDa1LKypIaiXVd1vfTGrJMAQ?key=npJtmwEeOk_yd-Q0eipI5A" alt=""><figcaption></figcaption></figure>

* We can choose Shopify theme fonts for Properties and Elements in the Global Styles.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdYs1cGlNT59Dnp1bFdj8NyO1hFHOgy0UbCMo1IVZbAmYNLbVutIMngOYg5yhiWiSNBKMfONNqN4Wpeuxlt4IqQI37HTWcMKzJ7guZ95TJCFoqc8KkYwEqwSXCx7_jmrxLRz2OL?key=npJtmwEeOk_yd-Q0eipI5A" alt=""><figcaption></figcaption></figure>

* Each Theme has a different theme font setting so when you choose the Shopify theme font before switching the theme, it will automatically apply the Shopify theme font of the new theme.

Example:

We choose this Bevan font for the current Shopify theme.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXddvNFsFRZgE0lpDNEms2xREzbrWoCn0yqNHxTfrPV2zyXIzMMplF2AKsDd7CqSfJllnz9a4-rLpkWhqLSQ5TBsmCIG9iSaUleIJyUms4Wrsz-OlV5NLeARR6T6p7HM8D0uk1SQ?key=npJtmwEeOk_yd-Q0eipI5A" alt=""><figcaption></figcaption></figure>

After switching the theme, It will automatically apply the Barlow font of the new Shopify theme.

<figure><img src="https://lh7-rt.googleusercontent.com/docsz/AD_4nXdbhHJFitFawwVVq_xjhMqoII9Jdnw9PmQ1N8xEErKCdT0J45LYNLPT90rrJFbPZoYWegkjrQ11IFBkn_Wf_V9moHzzyeMnWHr2PCQIHNrCKfsgn7BQb4_oEOwXaB58AF9PyxP3Hg?key=npJtmwEeOk_yd-Q0eipI5A" alt=""><figcaption></figcaption></figure>

### Frequently Asked Questions

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

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

2\. Can I use custom code to add new fonts?

Yes, but we do not suggest that you do it. This might slow down the page speed.

3\. I have used custom code to add a font before. Should I delete the code first and then upload the font in the uploaded fonts manager?

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

4\. If I delete a custom font that is used on a page, will it affect the live page?

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

### Related Resources

* [PageFly Global Style](https://help.pagefly.io/manual/global-styling-feature/)
* [PageFly Styling tab](https://help.pagefly.io/manual/elements-style-settings/)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.pagefly.io/page-structure-and-elements/editor/extra-functions/how-to-add-custom-font-in-pagefly.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.