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

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>
<!--tif (mso 16)]><style type="text/css">a {
	text-decoration: none;
}
</style><!&endif]--><!--tif gte mso 9]><style>sup {
	font-size: 100% !important;
}
</style><!&endif]--><!--tif gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG></o:AllowPNG><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><!&endif]--><!--tif !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>

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

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

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