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
View originalHi!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
View originalHello
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.
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 :)
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>
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 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!!!
+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:
<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>
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
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.