Solved

How can I Add Custom Fonts in Email Templates?

  • 27 November 2020
  • 5 replies
  • 2054 views

Badge +2

Hi, how can I use custom fonts in my campaign? I have added two custom fonts but doesn’t appear in the dropdown of fonts in “text block”. 

icon

Best answer by moises.toledano 27 November 2020, 16:40

View original

5 replies

Badge +3

Hi Jorge, 

Great question and happy to provide guidance. Here’s a Help Center article on how to add custom fonts to your email template. 

https://help.klaviyo.com/hc/en-us/articles/115005256008-Custom-Fonts-in-Email-Templates

Because not all email clients allow and render <style> tags, especially web-based clients like Gmail and Yahoo, you can't reliably use fonts that aren't already available in Klaviyo. Our default fonts are pre-installed on the vast majority of computers and devices, so you can be confident you'll deliver a consistent experience for all people reading your emails.

If you'd like to experiment with custom fonts, however, you can enhance the fonts your recipients will see if they are using an email client that does support custom fonts.

Email clients that support custom fonts currently:

  • Apple Mail
  • iOS Mail (the default email browser on iOS)
  • Default Android email client

Whenever you decide to use a custom font, you should always provide a fallback font in case your first-choice font doesn't render for a particular user.

Klaviyo doesn't host fonts, but we do support ways to use hosted fonts in your templates. Google hosts a number of fonts at google.com/fonts, and you can also use fonts from Adobe Typekit, FontDeck, or another font provider if you have an account and they give you access to the font's @import embed code.

Badge +2

Hi, yes I understand that some clientes doesn’t have this custom fonts but when I added my custom fonts in the asset library I already selected a fallback font. So I don’t understand why shouldn’t be able to see that font in email campaigns: 

 

 

Badge +3

Hi @jorgehostalet

I appreciate the response. Please submit this to our Support team and include the screenshot. In-app chat is now available. A product expert will be able to help you troubleshoot this specific challenge.

Badge

Where can I find more detailed information about importing custom fonts into my emails?  

I followed the instructions provided by Klaviyo for importing custom fonts and was able to locate a link to the font .woff2 file from our website however, it doesn’t work when adding it to the import font popup. I would love to find some more info about why this link isn’t working. Is there some specific settings for the font name, weight, style etc.?

Here is the link to the font .woff2 file on our website.  

https://www.xchair.com/static/version1652150343/frontend/ClassyLlama/xchair/en_US/fonts/exo2/regular/Exo2.woff2

I’ve also included a screenshot of the add font popup. 

 

Thank you in advance for an support you may be able to provide. 

Userlevel 7
Badge +60

Hey @X-Chair_Sean,

If you haven’t already, our very own @Anna McCarthy recently made a really insightful post with video walkthroughs explaining exactly how to import custom fonts and use them within Klaviyo. I’ve included this post below:

I may also suggest reviewing our Hosting a Custom Font on Your Site Help Center article. In my experience, that error message is typically pretty accurate when it indicates “font files could not be accessed”. This usually means the font file isn’t accessible to Klaviyo either because it’s not hosted publicly or because you haven’t enabled Cross-Origin Resource Sharing (CORS) as detailed in the Add a self-hosted custom font to your template section of our How to add custom fonts in email templates Help Center article.

David

Reply