Shopify is known for offering a wide range of features to help anyone build and customize their online stores. One of these features is email marketing, which allows you to reach out to your customers via email. However, one of the most disappointing areas of Shopify is the lack of customization available to email marketing templates.
Many Shopify users face is the difficulty of updating fonts in email templates. While Shopify allows you to change the font on your website, changing the font in emails can be a time-consuming and frustrating process. This can be particularly problematic for businesses that rely on email marketing as part of their sales funnel, as emails that don’t match their branding can undermine their credibility and lead to lower conversions.
Despite these issues, there are some workarounds that Shopify users can use to customize their email templates and update fonts. One option is to use a third-party email marketing service that integrates with Shopify. These services often offer more design options and customization features than Shopify’s built-in email marketing tools.
Another option is to add the custom code required to add the font yourself or hire a Shopify expert to help you. Here is how I recently updated email templates to include custom fonts for a merchant.
Before:
After:
While this may be the most underwhelming before and after you’ve ever seen, I hope it gets the point across that this actually works.
Essentially you just need to navigate to the Edit Code button after clicking into an email template, find the opening <style> tag, and paste in a valid font-face snippet. However be warned, this is a workaround as Shopify email templates don’t support <link> tags and this short post suggests against this approach when possible. Here’s what the markup file looks like after the updates:
...
/* we don't get access too this stylesheet*/
<link rel="stylesheet" type="text/css" href="/assets/notifications/styles.css">
<style>
/* font-face is what <link> tags load behind the scenes. Here is a free font from Google Fonts */
@font-face {
font-family: 'Tangerine';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/tangerine/v17/IurY6Y5j_oScZZow4VOxCZZMprNA4A.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
...
</style>
</head>
...
<body>
/* Add font-family to desired html */
<h1 class="shop-name__text" style="font-family: Tangerine;">
<a href="{{shop.url}}">{{ shop.name }}</a>
</h1>In conclusion, the lack of customization available on Shopify email templates and the difficulty of updating fonts can be a frustrating experience for designers and developers alike. However, there are workarounds available that can help you create emails that are both visually appealing and on-brand. Are you solving this problem with a different workaround? Let me know.