How to use custom fonts on your store

 

 

 

This article will guide you through the steps to upload and use custom fonts on your store

 

Upload the font files to Shopify Admin

EcomSolid supports 4 font formats: .ttf, .otf, .woff, and .woff2.


Step 1: Prepare your font files


Step 2: Head over to Shopify Admin > Settings > Files, and hit the “Upload” button to start uploading your font files.

Once uploaded, the files will be stored in Shopify’s CDN (Content Delivery System), and you can get the URLs to the files, which we’ll be needed in our next steps.

 


Step 3: Click on the chain icon to copy the URL to the file. Keep the URLs somewhere accessible for later use.

 

 

 

Set up your new font in EcomSolid

Step 1: Go to the EcomSolid Dashboard and switch to the Styles tab. Select the Global style preset current in use. Hit “Edit

If you have multiple presets and are unsure of which one is in use, simply pick one, and then we’ll make sure to apply this preset later on in the Editor.

 

Step 2: A new configuration panel will appear. On the left sidebar, select the Typography tab.

 


Step 3: Scroll down to the Custom Font section:

EcomSolid supports up to two different styles for your custom fonts, you can paste any style of a font into either the Regular or Bold field.

 

Step 4: Paste the URL to the font you copied earlier from the Shopify Admin into these fields.

 


Step 5: Scroll back up to the Heading font and Body and subheading font sections. 

In each Font drop-down menu, select Custom Font 1 (or Custom Font 2 corresponding to where you directed the font URL earlier in step 5.

Next, you can choose to use bold, or regular formats in the Weight drop-down.

 


Hit “Save Settings” and exit the panel.


Step 6: Switch back to the Theme tab and enter the Editor via the "Customize" button.

 


Step 7: Select the Global Style button, under Your Presets, apply the preset you’ve just updated.

 


You should see the new font applied to your heading, subheading, and body text. All there’s left is to publish to bring all the changes to your live store.


Step 8: Update your theme. Hit “Update Live”, then “Yes, Update”.

 


Feel free to browse our library for more articles. Should you need any further assistance, our EcomSolid Support Team is here to help.

We can be reached at any time via email or live chat.

 


Was this helpful?