How can I add a custom Google font to my email notifications?

Store Design
1

Hello to everybody,

I’m Simone and I would like to ask if there is a way to add custom Google font to mail notification.

I mean, I have created some mail template (Like order confirmed mail) on Klaviyo, and in Klaviyo I’ve add a code snippet that actually works, but just in Klaviyo, in fact if I export the code and copy/paste it in Shopify notification section, the custom font doesn’t show correctly.

This is the code snippet that actually works in Klaviyo (I’ve add this code in a text section) but not on Shopify:

@import url('[https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@700&family=Open+Sans:ital,wght@0,300;1,300&display=swap](https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@700&family=Open+Sans:ital,wght@0,300;1,300&display=swap)'); p, a { font-family: 'Open Sans', sans-serif!important; }

@import url('[https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@700&display=swap](https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@700&display=swap)'); h1, h2, h3 { font-family: 'Bodoni Moda', serif!important; }

And this is how the 2 mail are showed in Klaviyo or in Shopify:

ddddd.JPG
ddddd.JPG2164×553 61.2 KB

Can you help me with this issue please?

Thanks a lot,

Simone.

1 Like
2

@imones_dev

Sorry for facing this issue, it’s my pleasure to help us.

Welcome to the Shopify community!
and Thanks for your Good question. :blush:

so sorry Shopify email template custom font doesn’t allow this

3

Hello Ketan, and thanks for your reply.

So I’m not able to change the mail template font with a Google Font? No way?

In this topic seems that there is a way to solve my issue, but I’m not sure → https://community.shopify.com/c/Shopify-Design/Shopify-Email-Fonts/td-p/557560

If it’s not possible, do you have a list about the fonts that I can use in my shopify template mail?

Thanks and best regards,

Simone.

4

@imones_dev

no sorry.

5

And do you know what font can I use in the mail templates without getting errors?

Thanks,

Simone.

6

@imones_dev

https://www.campaignmonitor.com/blog/email-marketing/2019/02/10-things-need-know-web-fonts-email-right-now/

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

It is possible to add Google fonts to email templates - it seems to be possible to stop the inlining process using “data-premailer”:

From there you can use

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

as normal, and allow that to be inlined.

2 Likes