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

[imones_dev]

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:

<style type="text/css">@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@700&family=Open+Sans:ital,wght@0,300;1,300...');
p, a {
font-family: 'Open Sans', sans-serif!important;
}
</style>
<p style="text-align: center;"><span style="color:#000000;"><span style="font-size:8px;"></span></span>
<style type="text/css">@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:wght@700&display=swap');
h1, h2, h3 {
font-family: 'Bodoni Moda', serif!important;
}
</style>

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

Can you help me with this issue please?

Thanks a lot,

Simone.

[KetanKumar · Accepted solution]

@imones_dev 

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

[KetanKumar]

@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. 😊

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

[imones_dev]

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.

[KetanKumar]

@imones_dev 

no sorry.

[imones_dev]

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

Thanks,

Simone.

[KetanKumar · Accepted solution]

@imones_dev 

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

[DevsIT]

<style>
@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) 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; }

</style>

it is not working. Why?

[JohnHoltRipley · Accepted solution]

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

<style type="text/css" data-premailer="ignore">
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');
</style>

From there you can use

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

as normal, and allow that to be inlined.