Shopify themes, liquid, logos, and UX
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.
Solved! Go to the solution
This is an accepted solution.
This is an 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.
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
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.
no sorry.
And do you know what font can I use in the mail templates without getting errors?
Thanks,
Simone.
This is an accepted solution.
<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?
This is an 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.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024