HELP NEEDED! Use custom font on shopify email notification template

Store Design
1

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.

1 Like
2

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

1 Like
3

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

1 Like
4

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
shopify_notification_email_html.png900×518 26 KB

Locate the -tag inside the -tag as marked in the screenshot.

  1. Now changing your font is as simple as adding a new line straight after the opening -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.

  1. 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 “” 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.

  2. 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
google_fonts_selected_style.png1559×761 112 KB

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 */.

  1. Now paste the snippet straight after the opening -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!!!

2 Likes
5

Update:

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

  1. 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.

  1. 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 -tag for Google Font “Ubuntu”, with all steps performed:
6
@media only screen and (min-width: 1px) { @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url([https://fonts.gstatic.com/s/dmsans/v6/rP2Hp2ywxg089UriCZOIHQ.woff2](https://fonts.gstatic.com/s/dmsans/v6/rP2Hp2ywxg089UriCZOIHQ.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: 'DM Sans', sans-serif!important;} [style*="DMSans"] { font-family: 'DM Sans', sans-serif!important; }

Why is it not working?

7
@media only screen and (min-width: 1px) { @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url([https://fonts.gstatic.com/s/dmsans/v6/rP2Hp2ywxg089UriCZOIHQ.woff2](https://fonts.gstatic.com/s/dmsans/v6/rP2Hp2ywxg089UriCZOIHQ.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: 'DM Sans', sans-serif!important;} [style*="DM Sans"] { font-family: 'DM Sans', sans-serif!important; }

it is not working. Why?

8

Great, this works perfect

9

Hey !

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

10

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

11

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!