Solved

Why are my fonts changing once it's been delivered?

  • 24 February 2021
  • 18 replies
  • 1647 views
A
  • Anonymous
  • 0 replies

Hi there,

What's the best way to set a font that shows up in all email providers? I’ve been using Century Gothic within my templates as it fits in well with my branding style, but it always reverts back to Arial when delivered to my subscribers. Is there another font I could use that’s still modern and in keeping with my brand, and still shows up the same upon delivery in most email clients?

Here’s a screenshot of the current font I use and how it shows up in the Klaviyo preview.

 

Thanks,

Meeta

icon

Best answer by elisegaines 3 March 2021, 17:07

View original

18 replies

caroline
Userlevel 5
Badge +8

Hi there,

Century Gothic is generally considered a web-safe font. Could you provide some additional information, specifically regarding what inbox providers the subscribers who are seeing Arial are using? Do you have any screenshots you can share? (Please be careful not to include any of your API keys or customer data.)

If you’re looking for similar fonts, Futura is pretty close to Century Gothic.

Best,

Caroline

Caroline Lu
A

Hi Caroline,

Yes I thought so too! So here’s an example of how that same text appears in Gmail (mobile)…

 

caroline
Userlevel 5
Badge +8

Hi there,

This is likely a result of the fact that Gmail does not support web fonts. 

This Stack Overflow post does provide a list of fonts supported by Gmail; Century Gothic is unfortunately not included in that list.

Are you encountering the same issue with any other inbox providers, or is just Gmail?

Best,

Caroline

Caroline Lu
A

Hi Caroline, thanks, will ate a look at that article. 

This is also happening on a few others too (e.g. Samsung’s own email app, Outlook etc),

Thanks,

Meeta

A

I’ve also just tried Verdana (it’s in the list you sent over) and still having the same issue.

caroline
Userlevel 5
Badge +8

Hi there,

That’s good to know. Can you specify how you’re using these fonts? Are you using the built-in Klaviyo fonts, or are you using one of the methods described in this Help Center article?

Best,

Caroline

Caroline Lu
A

Hi Caroline, I’m just using them within the Klaviyo email builder.

E
Rank
Userlevel 5
Badge +25

Hi @meets ! Apple devices have their own version of Century Gothic, called Apple Gothic; you can get that font to appear instead of Arial by adding this code into your template: 

 

<style> h1, h2, h3, h4, p, ol, li, ul {font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif; }</style>

To add this code to a template: 
1. Click into the first text block in your template, and then click the “Source” button to open up the source code 

2. Paste the code above into the very top of the text block’s source code

 

You’ll only need to do this one time per email template. 

 

Best,

Elise

A

Hi @elisegaines Thanks for this! I will test this out!

(Sorry I only saw you had replied when I logged in just now)

A
Rank
Badge +3

Hello, everyone.

I’m having a similar problem where, in the mail editor, fonts styles are applied but at inbox they look as the fallback fonts, I’m using this snippet:

----

<style type="text/css">@import url('https://fonts.googleapis.com/css2?family=Carrois+Gothic&family=Pathway+Gothic+One&display=swap');

  p, ol, li, ul { font-family: Pathway Gothic One

, Trebuchet_MS, sans-serif; font-weight: 400

  }

 

  h1, h2, h3, h4 { font-family: Carrois Gothic, Tahoma, sans-serif;

  }

</style>

----

I’ve used this snippet before with Poppins, and Quicksand fonts and worked very well, so I don’t know if it’s a matter of font or if I’m missing something. Any help is welcome!

Thanks!!

Dov
Userlevel 7
Badge +61

Hello @Angel from eCohete,

Thank you for sharing your question with the Klaviyo Community. And thank you @caroline, @meets & @elisegaines for your insightful replies.

@Angel from eCohete, custom fonts may not render as expected on all devices or email clients.

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

 

Can you confirm if you are previewing on an email client that does not support custom fonts? If so, it would be expected that the fallback font is used.

Thanks and have a great day.

DD
A
Rank
Badge +3

Hi @dov.derin !

Thank you for answering.

I’m not using an email client that doesn’t support custom fonts. Actually, in previous mails, I was able to see custom fonts at inbox. That’s pretty much what I don’t understand, what’s different now.

 

Have great day!

Dov
Userlevel 7
Badge +61

Hi @Angel from eCohete,

Thank you for your follow-up.

That code snippet looks good! Nothing has changed with respect to displaying custom fonts on Klaviyo’s end. The fact that the fonts are showing correctly in the Klaviyo editor and not in the inbox tells me that the inbox is impacting the ability for custom fonts to display. Can you confirm which inbox provider you’re using to preview the emails? Perhaps they have made a change we can dig into further.

DD
A
Rank
Badge +3

Thank you @dov.derin !

I’m using Gmail. Something I noticed recently is that custom fonts are not shown in mobile devices (tried 3 at this time). Custom fonts appear perfectly on a desktop screen.

 

Have a good day!

Dov
Userlevel 7
Badge +61

Hi @Angel from eCohete,

Thank you for sharing that information with me.

Currently, Gmail is not an email client that fully supports custom fonts. You can find all of the email clients that do support custom fonts in my last reply. You can also find more information in Klaviyo's documentation on using custom fonts.

To be clear, it doesn’t mean the custom fonts will never work in Gmail, for example if you have the font pre-downloaded on your device you may see certain fonts display for mobile or desktop, but this is not consistent across all fonts and it will not work for recipients of the email unless they too have the fonts pre-downloaded on their device(s). This is a limitation on the email client side, rather than Klaviyo.

I would just keep this in mind if you choose to use custom fonts, always have a fallback web-safe font ready just in case.

Thanks and have a wonderful Thursday.

DD
J
Rank

Hi, we’re currently having the same issue. We want to use Lato Light 300 for our body text. However, once we send a test / send it out, the font converts to a bolder font. Is this a fallback font issue? Please advise how to fix.

 

Taylor Tarpley
Rank
Userlevel 7
Badge +60

Hi there @jessgarcia, 

 

I’m sorry that your custom font isn’t exactly how you want it! Unfortunately, custom fonts aren’t always respected by inboxes  so there’s no guarantee that your chosen font is the one an inbox will show. This is why we suggest having fallback fonts you prefer in case your custom font, which is your first choice, isn’t able to be shown. If your bolded version if your fallback, that might be the case!

 

Hope this helps!

-Taylor 

B
Rank
Badge

Hi @all can anyone help me on this ,

we were not able to solve one issue: being able to display our custom fonts due to am OS not supporting a typeface. Is there a way to use custom code to embed typefaces/ our host typefaces on a server and override the fallback font necessity on an OS? or any possible solution through code to help us rectify this issue?

Reply


Most helpful members this week

Terms & ConditionsCookie settings

Links & Resources

Platforms

Partners

Useful Things

About

  • Terms and Privacy
    © 2024 Klaviyo All rights reserved. Klaviyo and the Klaviyo logo are trademarks or registered trademarks of Klaviyo, Inc. or its affiliates.