Hi @Diana123, 

Thanks for sharing your question with us! Love to see you taking advantage of our custom fonts to make your emails align with your brand. 

The Help Center documentation you linked is a very helpful tool when setting up the code you need to create to insert your custom font. It is recommended to just use one fallback font. You’re correct, Open Sans isn’t a supported fallback font. Common web-safe fall back fonts include Arial, Georgia, Helvetica, Times New Roman, and Verdana. However, I would also suggest checking out this article to find more web-safe fallback font options. 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! 

Finally, when you’ve ensured that everything looks correct in your code and you’re looking to insert it in your template, it should be noted that you only need to add this code to the first text block in your email. The subsequent text blocks will include the custom font

Once you've added the snippet to the source code, you’ll see the custom font applied to any text that has a default style (Normal, Heading 1, Heading 2, etc.). 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.

Thanks for participating in the Community! 

-Taylor 

Thanks, Taylor for the quick reply!

So it seems that I should only pick one web-safe fall back font, and that fall back font should be already supported by Klayvio.

I’m still having an issue getting my custom font to render. Recorded a 2 min Loom video showing my situation and issue. Could you please advise? Essentially the custom font code is not saving and is getting replaced with something else whenever I enter in my text. And I cannot see my custom font Poppins.

Thanks!

This is the code I’m using with Poppins as my custom font, and Klayvio supported New York as the fall back.

Custom Font Code

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

  p, h1, h2, h3, h4, ol, li, ul { font-family: Poppins, New York,

  sans-serif; }

</style>

Thanks!

Hi @Diana123, 

Thank you so much for sharing that helpful loom video! It definitely helped me clarify what might be going on here! 

For starters, at the time of you trying to implement your custom font code, custom fonts were not supported yet in the new Template Editor. Additionally, you will need to have the text block with at the very top of your template so it will tell the rest of the template what to do and where to insert the fonts essentially. However, I am very happy to share an exciting announcement as of yesterday!  Custom Fonts are Now Supported in the New Template editor. I would check out our February Product Update Blog to see everything in store as well as check out our Community posts about it below. 

Thanks!

-Taylor 

Got it, thanks. That’s helpful and I’ll check out those resources. Glad that custom fonts are now available in the new editor. Phew! :)

Yes! The documentation on custom fonts still needs to be updated to reflect this - but that will be out very soon! 

Got it, I’ll keep an eye out for it.

Linked the New Documentation in my response from the 9th !