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.
How can you apply a custom font onto buttons?
Hello
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
![Anniversary - 2 years Badge](https://uploads-us-west-2.insided.com/klaviyo-en/attachment/9c1854d8-7db8-4ea0-95f4-085af72d8496_thumb.png)
A workaround could be to create a button in photoshop with your desired text and then upload the image as an image block.
![Anniversary - 2 years Badge](https://uploads-us-west-2.insided.com/klaviyo-en/attachment/9c1854d8-7db8-4ea0-95f4-085af72d8496_thumb.png)
![Anniversary - 2 years Badge](https://uploads-us-west-2.insided.com/klaviyo-en/attachment/9c1854d8-7db8-4ea0-95f4-085af72d8496_thumb.png)
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 :)
![[Academy] Klaviyo Product Certificate Badge](https://uploads-us-west-2.insided.com/klaviyo-en/attachment/8798a408-1d98-4c3e-9ae8-65091bb58328_thumb.png)
Exactly
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>
![](https://uploads-us-west-2.insided.com/klaviyo-en/attachment/59650b60-576a-4d39-813a-2ad747fbafbc.png)
![Academy Student - 1 Badge](https://uploads-us-west-2.insided.com/klaviyo-en/attachment/b8dc3931-d263-4af8-a078-1d93afd10378_thumb.png)
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!
![Anniversary - 2 years Badge](https://uploads-us-west-2.insided.com/klaviyo-en/attachment/9c1854d8-7db8-4ea0-95f4-085af72d8496_thumb.png)
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!!!
![Anniversary - 2 years Badge](https://uploads-us-west-2.insided.com/klaviyo-en/attachment/9c1854d8-7db8-4ea0-95f4-085af72d8496_thumb.png)
+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:
- 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> - 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
Reply
Log in to the Community
Use your Klaviyo credentials
Log in with Klaviyo
Use your Klaviyo credentials
Log in with KlaviyoEnter your E-mail address. We'll send you an e-mail with instructions to reset your password.