Skip to main content
Solved

How can you apply a custom font onto buttons?


Forum|alt.badge.img+2

Hi!How can I add a google font into a buttons? I have done everything from klaviyo instruction about it, but still cannot change font on buttons, I can change fonts only on text blocks, but not on buttons.

Best answer by David To

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

View original
Did this topic or the replies in the thread help you find an answer to your question?

10 replies

David To
Klaviyo Employee
Forum|alt.badge.img+60
  • Klaviyo Employee
  • 2456 replies
  • Answer
  • May 27, 2021

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


Forum|alt.badge.img+1
  • Contributor I
  • 1 reply
  • May 28, 2021

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


Forum|alt.badge.img+2
  • Contributor I
  • 1 reply
  • June 26, 2021

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


Forum|alt.badge.img+3
  • Contributor I
  • 1 reply
  • July 29, 2021
Jack wrote:

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

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


Forum|alt.badge.img+4
  • Contributor I
  • 2 replies
  • August 24, 2021

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>
Button block with Raleway font

 


Forum|alt.badge.img+3
  • Contributor IV
  • 8 replies
  • October 25, 2021

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!


Omar
Partner - Platinum
Forum|alt.badge.img+46
  • 2025 Champion
  • 494 replies
  • December 15, 2021

@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.


Forum|alt.badge.img+1
  • Contributor II
  • 3 replies
  • December 29, 2021
Diana123 wrote:

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!

Yes please!!!


Forum|alt.badge.img+1
  • Contributor I
  • 1 reply
  • January 5, 2022

+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!


bhas
Active Contributor I
Forum|alt.badge.img+6
  • Active Contributor I
  • 10 replies
  • January 8, 2022

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