OrderlyEmails

Use a self-hosted custom font in the email designs (Advanced)

Advanced guide for using a custom font in the email designs.

Article2 min readUpdated Feb 23, 2025View source ↗
This guide will allow you to use any custom font in your OrderlyEmails email designs. Before trying this article, we suggest checking if there is a similar font already available on Google Fonts. We are happy to add additional Google Fonts to the app editor if needed, so you do not need to manual change code for those. WARNING This is an advanced guide. It requires knowledge of HTML, CSS and Liquid. Consider hiring a Shopify Expert if you aren't comfortable doing the steps in the tutorial. Overall explanation Adding a custom font means you need to overload one of the chosen fonts in the emails with your custom font. So for example if you have Montserrat chosen in the editor, these steps will trick the emails into loading your custom font file, while also making it think it's still Montserrat. This is done so you don't have to update all references to Montserrat in the email code, which is all over the place. Step 1 In the OrderlyEmails editor, go to the "Theme settings" tab and into the "Typography" section Step 2 Select the closest matching google fonts to your intended styling, and make sure to set as many fonts that will need to be different. For example if you will be using 2 different custom font-families, one for headings and one for body, then make sure you have 1 google font set for headings a different one set for body in the editor. Setting the fonts to as close a match is recommended because it will ensure correct "fallback" fonts are used, for email clients that don't support custom fonts. Step 3 Set the font weights for each of the Google fonts in the editor, to what you will be using with your custom font. The above not only makes it possible to overload those fonts, but also ensures that the fallback font-stack get the correct weights. Step 4 Finish customising the emails in the editor, then click Purchase/Finish so you are shown the email code Step 5 Now modify the code in each of the emails in the following way: Find the section of code (just after first ending style block) that looks similar to this:
Was this article helpful?

Still puzzling over something?

The agent has read this article — and everything around it. Ask a follow-up and it answers in seconds.

Related entries
01

Manually updating email links

This article describes how you can update the email links manually, to the latest version.

Article02

Installing OrderlyEmails

Instructions for installing OrderlyEmails into your Shopify account

Article03

How do the "Recommended products" work?

Information about the recommended products section which can be added to emails to increase repeat purchases

Article04

How much does OrderlyEmails cost?

Pricing information for OrderlyEmails

Article05

What does the "Magic Designer" do?

The magic designer styles your emails to match your website design, automatically!

Article
← Back to Untitled Collection