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 manually 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 are using two different custom font families, one for headings and one for the body, then make sure you have one Google font set for headings and a different one set for the 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 gets 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:
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700|Montserrat:700,400" rel="stylesheet" type="text/css" data-premailer="ignore" />
<!--<![endif]-->
Replace it with the following (making sure to update the Google Font name and weights to what you chose in the editor):
<!--[if !mso]><!-->
<style type="text/css" data-premailer="ignore">
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 400;
src: local('actual-name-of-font-regular'), url(https://link-to-your-font-file-regular.woff) format('woff');
}
@font-face {
font-family: 'Montserrat';
font-style: normal;
font-weight: 700;
src: local('actual-name-of-font-bold'), url(https://link-to-your-font-file-bold.woff) format('woff');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: local('actual-name-of-font-regular'), url(https://link-to-your-font-file-regular.woff) format('woff');
}
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 700;
src: local('actual-name-of-font-bold'), url(https://link-to-your-font-file-bold.woff) format('woff');
}
</style>
<!--<![endif]-->
Note: Make sure to link to a woff version of your font.
Step 6
Follow the normal "Installation instructions" in the app to add the email code to the Shopify admin -> Notifications. Just make sure to use your new custom code instead of the code provided in the app.
Oh no, I messed up. How can I go back to the original emails?
No worries at all, you can go back to using the normal emails again, without your font changes, by following the "Installation instructions" in the app again and using the code provided by the app.
Extra info (no action required)
In the email code you will see the font-family applied to html tags always shows the Google Font at the end of the stack, example:
font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',Arial,'Montserrat';
As wrong as that looks, it's intended and fixes issues in Outlook which otherwise defaults to Times New Roman if it encounters a custom font. There is some CSS in the head which targets this (which Outlook ignores) and applies the correct font stack in email clients that can handle custom fonts:
[style*="Montserrat"] {
font-family: 'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif !important;
}