Hello @salesgenomics,

Great question!

Although custom fonts such as Google, Adobe, or self-hosted fonts are supported within Klaviyo, their support does not extend to all blocks within Klaviyo. As highlighted in the How to Add Custom Fonts in Email Templates article:

In order to use custom fonts, the code must be manually added to each message you send. The font will not be available in the dropdown menu within the template editor, and custom fonts are not supported in product, button, or header/link blocks.

At this time, custom fonts can only apply to Text Blocks, Table Blocks, and Split Blocks utilizing the Text Block function. I would be more than happy to share this feedback with our Product Team. 

Thanks for being a member of the Klaviyo Community!

David

A workaround could be to create a button in photoshop with your desired text and then upload the image as an image block.

@Jack  - great idea, and I did exactly that since the image block can submit the form with a button click.

Be careful with this trick though - Outlook doesn’t show images by default meaning your CTA might be overlooked :)

Exactly @Soren. Gotta watch for those pesky email clients @Jack

Here’s how I got it to work; just added ‘a’ (which targets anchor text) to the list of tags to apply the font to:

<style type="text/css">@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
  a, p, h1, h2, h3, h4, ol, li, ul { font-family: 'Raleway', Helvetica, Arial
  sans-serif !important; }
</style>

Yes please do share this request your product team. It would be great to be able to use custom fonts on the CTA buttons so that the entire email design is cohesive and on brand. Thanks!

@salesgenomics @notrick one small thing to add to this is that besides adding a, to the list you should also add !important to it otherwise Klaviyo will overrule this with custom styling on the elements itself.

Yes please!!!

+1 on this request. Would really love to be able to apply custom fonts to buttons, product blocks, etc. If you can only apply to text blocks you end up having mismatched fonts throughout your email.

Thank you!

Hi, I am late to this but hoping someone could answer these questions:

1. Can I add only one custom font using this method? Since the font doesn’t get added to dropdown menu, what can we do if I want to replicate the website experience where headlines and body copy has different fonts? 

   <style type="text/css">
   @import url('FONT_URL');
     p, h1, h2, h3, h4, ol, li, ul { font-family: INSERT_FONT_NAME, INSERT_A_FALLBACK_FONT,
     sans-serif; }
   </style>

2. There is a space for adding fonts in the brand assets. I have added two Google fonts, but I am not sure if they are making any difference.

Also, this seems like a n00b question, but even when I went with the above strategy of adding fonts in the code, I didn’t see any change i the email template. What am I missing? Does the fonts change instantly in the template, or do we have to refresh it?

Hoping for some help here @David To