Solved

Imported fonts showing preview but changes when sent out

  • 26 March 2021
  • 5 replies
  • 768 views

Badge +2

Hi Klaviyo Community, 

 

Wonder why my imported fonts from Adobe and Google doesn't work. My header fonts are all from adobe and works:

From the klaviyo preview:

 

How it looks when its sent (please note the button and subtitle “NYHEDER” that has changed.

 

What is wrong?

 

This is the current code:

<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta name="x-apple-disable-message-reformatting" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta content="telephone=no" name="format-detection" />
<title></title>
<!--[if (mso 16)]><style type="text/css">a {
text-decoration: none;
}
</style><![endif]--><!--[if gte mso 9]><style>sup {
font-size: 100% !important;
}
</style><![endif]--><!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG></o:AllowPNG><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]--><!--[if !mso]><!-- --><!--<![endif]-->
<style type="text/css">h1,h2,h3,h4 {
font-family: 'ivypresto-text, serif;
font-weight: 600;
line-height: 1.2em !important;
}
</style>
<style type="text/css">p,ol,li,ul {
font-weight: 300;
font-family: 'Nunito', 'sans-serif', 'Verdana';
}
</style>
<style type="text/css">@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");
h5 {
font-family: 'Nunito', 'sans-serif', 'Verdana';
letter-spacing: 0.2em;
}
</style>

 

icon

Best answer by David To 16 April 2021, 17:37

View original

5 replies

Badge +3

Hi Peleton,

At a glance the “font-family” looks like it’s not closed off properly, might be this, assuming that “NYHEDER” is wrapped in one of those tags ?

 

Regards,

Jason

Badge +2

Hi Jason,

 

Thanks for pointing that out. I fixed that now. However, the “NYHEDER” is my h5. That does not fix it, unfortunately.

The code looks like this now:

<meta charset="UTF-8" />
<meta content="width=device-width, initial-scale=1" name="viewport" />
<meta name="x-apple-disable-message-reformatting" />
<meta content="IE=edge" http-equiv="X-UA-Compatible" />
<meta content="telephone=no" name="format-detection" />
<title></title>
<!--[if (mso 16)]><style type="text/css">a {
text-decoration: none;
}
</style><![endif]--><!--[if gte mso 9]><style>sup {
font-size: 100% !important;
}
</style><![endif]--><!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG></o:AllowPNG><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]--><!--[if !mso]><!-- --><!--<![endif]-->
<style type="text/css">h1,h2,h3,h4 {
font-family: 'ivypresto-text', serif;
font-weight: 600;
line-height: 1.2em !important;
}
</style>
<style type="text/css">p,ol,li,ul {
font-weight: 300;
font-family: 'Nunito', 'sans-serif', 'Verdana';
}
</style>
<style type="text/css">@import url("https://fonts.googleapis.com/css2?family=Nunito&display=swap");
h5 {
font-family: 'Nunito', 'sans-serif', 'Verdana';
letter-spacing: 0.2em;
}
</style>

 

Userlevel 5
Badge +34

Hi @Peléton,

A few other formatting points stand out to me that may be worth testing:

  • Although single and double quotes are interchangeable within CSS, I noticed that our help center article applies the use of single quotes around the font URL and I you are using double quotes.
  • You have listed 2 fallback fonts whereas our help center article lists a spot for 1. I’d be curious if you removed the second fallback font if that would do anything?
  • Make sure your font code is added to the first text block in your email template.
  • Finally, when you are previewing these templates, I’d be curious to know what inbox you are using to preview. There are known HMTL/CSS formatting challenges for emails received by certain versions of Outlook.

I hope this helps!

Julie

Badge +2

Hi @julie.accardo thank you for your answer.

 

  1. I am not sure what you mean with the single and double quotes in my code. 
  2. I’ve updated my code. See down below.
  3. I’ve updated my code. See down below.
  4. I am using Gmail web. 

 

I have updated the code and this is how it looks in my Gmail: 

 

The body font is way too thick (looks like it’s bold). Previewing in my gmail app on my iPhone 12, the text formatting is correct. Any idea what might be wrong?

Best, Jesper

Userlevel 7
Badge +60

Hello @Peléton,

Some thing to keep in mind is that when utilizing Custom Fonts within emails, custom fonts are only supported on certain inbox providers/email clients.

Currently, the email clients that support custom fonts include:

  • Apple Mail
  • iOS Mail (the default email browser on iOS)
  • Google Android (except Android 2.3, which doesn’t support the @import method used by Google and Adobe fonts)
  • Samsung Mail (Android 8.0)
  • Outlook for Mac
  • Outlook App

Therefore, previewing the email within your Gmail Web view on desktop would not render these Custom Fonts and would instead try to utilize your set fallback font; or if that isn’t supported they would fall back to Gmail’s default fallback font. Common web-safe fonts include Arial, Georgia, Helvetica, Times New Roman, and Verdana and a list of others can be found from this link here: Find more web-safe fonts. 

 

Best,

David

Reply