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

ma5 · ‎11-13-2020

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.

Syed_Mustafa · ‎11-13-2020

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

banned

ma5 · ‎11-14-2020

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

ESQ_dev · ‎11-04-2021

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:

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:

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 · ‎11-10-2021

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>

DevsIT · ‎11-30-2021

* { font-family: 'DM Sans', sans-serif!important;}

[style*="DMSans"] { font-family: 'DM Sans', sans-serif!important; }

</style>

Why is it not working?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on ce.shahabuddin@gmail.com regarding any help
Certified Shopify Expert | Skype : engr-shahabuddin | Whatsapp: +8801722574364

DevsIT · ‎11-30-2021

* { font-family: 'DM Sans', sans-serif!important;}

[style*="DM Sans"] { font-family: 'DM Sans', sans-serif!important; }

</style>

it is not working. Why?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on ce.shahabuddin@gmail.com regarding any help
Certified Shopify Expert | Skype : engr-shahabuddin | Whatsapp: +8801722574364

graceapollock · ‎05-06-2024

Hi, this is working great! I know you recommend only adding one font style but I want to add a different font for the headers and body text. How would I customize the headers versus body text while uploading google fonts?

Thanks!

azeem-rainycity · ‎09-08-2023

Great, this works perfect

shopekaja · ‎09-26-2023

Hey !

Any idea on how can I change the font size of the same ?

azeem-rainycity · ‎09-26-2023

Hi, you can write css there in the header for styling

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

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

Community Blog Articles