Custom fonts not showing anywhere - advice?

  • 28 March 2022
  • 1 reply
  • 625 views

Badge +3

Hi all - new Klaviyo user here!

 

I’ve been struggling getting custom fonts to work the way I want to.

 

Our brand fonts are Libre Caslon (for headings) and Open Sans (for body text). These don’t appear to be supported by major email providers, but what’s even more frustrating is I can’t seem to get the fallback fonts to work either.

 

I have tried so many different combinations of fallback fonts, here is an example that I’m currently using:

<style type="text/css">@import url('https://fonts.googleapis.com/css2?family=Libre+Caslon+Text&family=Open+Sans&display=swap');
p, ol, li, ul { font-family: Open Sans, Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4 { font-family: Libre Caslon Text, New York, Georgia, serif;
}
</style>

As you can see, I’ve added multiple fallback fonts to increase the chances of them working, but they seem to default to the last option.

 

I am wondering if other companies have been in the same position?

These brand fonts are a big part of our identity as they’re used consistently everywhere and it’s such a shame to not be able to use them in email.

Is there a fix? If not, would the best option be to leave the code as it is and hope for the best, or simply use basic fonts to at least have some control over how the emails look?


1 reply

Userlevel 7
Badge +60

 

 

Hi @Nadine,

 

Welcome to the Community! We are glad you’re here! 

 

 

Sorry you’re having a frustrating time with your custom font experience! As you’ve experienced, not all email clients support custom fonts, and there isn’t a workaround for this as that is up to the email client’s discretion.

 

It is recommended to just use one fallback font. Unfortunately, Open Sans isn’t a supported fallback font. Common web-safe fall back fonts include Arial, Georgia, Helvetica, Times New Roman, and Verdana. I’d recommend choosing only one of these for a fallback font option . However, I would also suggest checking out this article to find more web-safe fallback font options for more insight. If you are using just one font, then your code appears to be correct. However, I would recommend going through every space, letter and symbol with a fine-tooth comb as even one wrong space or symbol could render the code incorrect! 

 

Additionally, can you ensure that you have added this code to the first text block in your email as seen in this screenshot below? You won’t see your custom font applied to any text that has a default style (Normal, Heading 1, Heading 2, etc.) until this source code is in the proper place. If the font is not being applied to a portion of your text, navigate to that block and make sure that a style has been selected from the paragraph styles menu, seen in the second screenshot. However, if you have followed all these directions successfully and your custom font isn’t seen in the email, then it is definitely not supported. However, one of the verified fallback fonts should display. 

 

 

I’m sorry for the inconvenience you face as you can’t use the custom fonts that match your brand’s voice. Hopefully one of the verified fallback fonts might give a similar feeling to your company’s visual theme. Finally, I’d reccomend checking out these similar posts going through the same issue to gain more insight on the topic of troubleshooting custom fonts. 

 

Thank you for participating in the Community!

-Taylor 

Reply