Use custom fonts

3250 views Linh 11

Important: This feature is only available on the Pro plan

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 format

1.1 – Download the font

In our example, we download a font from www.dafont.com. 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”.

1.2 – Convert the font to the web font format

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

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


Next, you should see the “download” link. Click on it.

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

1.3 – Upload the font to your Shopify store and update

In your Shopify dashboard please navigate to Settings > Files

Then upload 2 font files 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 those fonts to our PageFly page. In our example, the fonts URLs are:
Embed this pen

https://codepen.io/sellersmith/pen/RQKzLL

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

After opening the file you’ll see the code below.
(embed this https://codepen.io/anon/pen/VEBGoq)
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 https://codepen.io/anon/pen/ReBebO)

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

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.

2.3 – Apply the custom font to the whole page

(Embed this https://codepen.io/anon/pen/YJjJPg)

2.4 – Apply the custom font to a specific element

Select the element.

In General > Attribute, put a name in Class. For example: custom-font

Then embed this https://codepen.io/BraveBits/pen/vYEjYBd

(replace *:not(.fa) 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 works.

Was this helpful?

Start your free 14-day trial
of PageFly

.myshopify.com
Don’t have Shopify store yet? Create store
×