Even on PageFly’s free plan, you can upload your own fonts and use them in your page designs. This comes in handy if you want a Japanese font that isn’t in Google Fonts, or a font that’s specific to your brand.
Supported Font Formats
PageFly supports four font formats:
.TTF(TrueType Font).OTF(OpenType Font).WOFF(Web Open Font Format).WOFF2(Web Open Font Format 2)
Whatever you upload gets automatically converted to WOFF2. WOFF2 has the best compression of any web font format, so this keeps the impact on page load speed to a minimum.
Note: If you’re on Shopify’s Trial Plan, you won’t be able to upload fonts — this is a file-format restriction on Shopify’s end, not PageFly’s.
Step 1: Upload Your Font
From the PageFly dashboard, open Extra functions, then click Manage next to Uploaded Fonts.
Once the font manager opens, click Upload font and select your file. You can upload multiple fonts at once if you need to.
After uploading, PageFly converts the file to WOFF2 in the background. Depending on file size and your connection, this can take a moment — once it shows up in the list like below, it’s ready to use.
Step 2: Apply the Custom Font in the Editor
Once your font is uploaded, open the PageFly editor. Select the text element you want to restyle, then in the settings panel on the right, go to:
Styling → Font Family → Uploaded Fonts
Check the box for the font you want, and it applies to that text element immediately.
As you can see below, uploaded Japanese fonts render correctly on the live page too.
Managing Fonts Store-Wide With Global Styles
If you want one font used consistently across your entire store, setting it in Global Styles is the efficient way to do it. Set it once, and the same font automatically applies to headings, body text, and buttons across every page — keeping your design consistent without extra work.
Setup Steps
- From Extra functions, click Manage next to Global Styles.
- Click Typography, then go to the Styling tab → Font Family.
- Click the settings icon, select Uploaded Fonts, and choose the font you want to use.
- Assign fonts by typography type — headings (H1–H6), body text, buttons, and so on.
- Once you’re done, click Publish to save your changes.
Fonts registered in Global Styles also show up as options inside the editor going forward, so you won’t have to hunt for them manually every time you build a page.
FAQ
Q: Can I use a custom font in the editor right after uploading it?
A: Not quite — you need to add it to Global Styles first. Once it’s registered there, it shows up as an option in the editor’s font selector.
Q: Can I add fonts through custom code instead?
A: Technically yes, but it’s not recommended — it can hurt page speed. Using the built-in font upload feature is the safer option, both for performance and for keeping things manageable. If you previously added a font via custom code, it’s recommended to remove that code and switch to the upload feature instead.
Q: If I delete a custom font that’s in use, will my page break?
A: No — published pages won’t break. Any element that loses its font simply falls back to the font set on its parent container.
Wrapping Up
PageFly’s custom font feature is available right from the free plan, and it covers a wide range of formats, Japanese fonts included. It’s well worth using if you want a consistent brand look or need a specific font that isn’t available through Google Fonts.
As a rule of thumb: register a font in Global Styles if you want it used consistently across your whole store, and set it directly in the editor if you just want to change the font on a specific page.
