HELP NEEDED!! Use custom font on shopify email notification template

ma5
Tourist
8 0 2

Hi,

I am trying to apply custom fonts on order confirmation notification template but for some reason its not working.I am using Google fonts through import css property

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500;600&display=swap');

I also tried using Link tag but still it is not working.Can someone help me understanding the issue ?

Thanks.

Replies 4 (4)
Syed_Mustafa
Shopify Partner
113 3 7

Hi yes, I can help you with this issue. Thanks 

ma5
Tourist
8 0 2

Can you please suggest a solution for it because i have tried every possible to way apply custom fonts on email templates.

ESQ_dev
Tourist
3 0 0

Alright, now this is a fix for everyone trying to use Google Fonts as a "custom font on shopify email notification template".
Changing the font is actually quite simple:

1. Go to Settings -> Notifications and select the Email-Event, you want to change the font for. This will open an HTML view like this:

shopify_notification_email_html.png

Locate the <style>-tag inside the <head>-tag as marked in the screenshot.

2. Now changing your font is as simple as adding a new line straight after the opening <style>-tag:

 

* { font-family: 'TheFontsName', sans-serif; }

 

This will already work for CSS Web Safe Fonts ( Check them out at W3C ). Try your luck testing them with the "Preview"-Button in the top-right corner of your Shopify-Admin-Panel after you inserted your rule.

3. As for custom fonts (Google Fonts in this case) we are now still missing the according font-face rules to make our font usable.
For clarification I want to add: "@import" and "<link href="">" rules are not supported in Shopify Notification Emails.
To overcome this go to Google Fonts and select the font you want to use. I can recommend to select only 1 font-style once you have chosen your font, as otherwise you might end up loosing performance in email load time.

4. After selection of your font-style, you can use the button in the top-right corner to display needed CSS for import. It should look similiar to this:

google_fonts_selected_style.png

You can now copy the url inside the import-rule and paste it to a new browser window. This will open up a site, with a couple of "@font-face"-rules.
As long as you want to display normal characters, you are most likely going to copy the snippet below the comment /* latin */.

5. Now paste the snippet straight after the opening <style>-tag in the HTML of Step1 and before your rule of Step2 (don't forget to specify the family name in the rule of Step2, if you haven't already) . . .

. . . and you're done!!!

ESQ_dev
Tourist
3 0 0

Update:

I've noticed issues with the display of fonts configured as shown above in email client Outlook.

6. In order to override default rules and set fallback fonts, you need to add another style rule below the previously created (Step2):

 

[style*="TheFontsName"] {
    font-family: 'TheFontsName',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif !important;
}

 

 Replace    TheFontsName     with the name of your chosen font.

7. As for the @font-face rule, we need to apply a media query. Wrap your @font-face rule with the following code:

 

@media  only screen and (min-width: 1px) {
  /* Your @font-face-rule here */
}

 

 

Here is an example <style>-tag for Google Font "Ubuntu", with all steps performed:

 

<style>
    @media  only screen and (min-width: 1px) {
        @font-face {
            font-family: 'Ubuntu';
            font-style: normal;
            font-weight: medium;
            font-display: swap;
            src: url(https://fonts.gstatic.com/s/ubuntu/v15/4iCv6KVjbNBYlgoCjC3jsGyN.woff2) format('woff2');
            unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
        }
    }

    * { font-family: 'Ubuntu', sans-serif; }

    [style*="Ubuntu"] { font-family: 'Ubuntu',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif !important; }

    .button__cell { background: {{ shop.email_accent_color }}; }
    a, a:hover, a:active, a:visited { color: {{ shop.email_accent_color }}; }
</style>