Hi @bhas,

Thanks for sharing this with us.

It’s not necessary to paste the custom font code in every text block. The empty text block at the top of the template is the simplest approach.

I recommend using the code format we have in our help center doc on using multiple custom fonts for google fonts. I see the difference between your code and the code below (taken from the documentation) is you use two separate sets of style tags. I recommend trying to contain everything between a single set of style tags like the following:

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

  h1, h2, h3, h4 { font-family: INSERT_FONT_NAME, INSERT_A_FALLBACK_FONT, sans-serif;
  }
</style>

I am also attaching a video my colleague Anna put together for adding custom google fonts here.

I hope that’s helpful! 

Hi, this helped in that I got the new fonts working, for anything new that I typed 

Since I am working on an existing template, the font changes didn’t reflect automatically to the existing text as shown in the Loom video, even after saving and refreshing the template

This can be a problem, as I might have to go and redo all existing copy manually in all the templates and flows.

I

Hi @bhas,

Thanks for sharing this update with us.

Glad to hear that it’s working for new text.

It sounds like you’re describing a situation in which existing parts of the template contain inline styles (for font family for that specific piece of text, see example screenshot below). You can verify this by clicking on the source of the block. If you have inline styling, it’ll look like the following:

If this is the case, it can be remedied by copying and pasting that section as plain text (as I describe in the post below) 

then the custom fonts should apply as long as the text type is specified in the custom fonts code i.e. font X to display for p,h1,h2 etc.

I hope that helps.

Hi there, fam! 

I am also trying to upload a custom font that isn’t present in Google Fonts. 
I have just a OTF file. 

What can I do to upload them?

I already read this article
https://help.klaviyo.com/hc/en-us/articles/360047999812
So in turn, I had tried to apply the custom font through the link.

https://fonts.shopifycdn.com/neue_haas_unica/neuehaasunica_n4.520eb21cee3158fb9a058bc588d9a342a8ebfda3.woff2

Ideally, I have to deliver this tomorrow. But I would be grateful if I figure it out for good. 
Working on this website. 
https://athletiquerecreationclub.com/

Hi there @Akselpd,

I would recommend following the first help article you posted and read to the step about installing a custom font. The article then links here and you should be able to go from there. If you are running into errors, then please feel free to write back with screenshots or any details.

Best,

Alex

Hi Alex,

Here is a video of me following this steps. 
https://www.loom.com/share/daaa4c52f2ba4200aba01c9c9fba93ad
Can you help me resolve this? 

Thanks,
Alex 

Hey @Akselpd ,

Thanks for the video. From my experience, your custom font may not be recognized if CORS is enabled. Here are some resources we have on it:

• Hosting a Custom Font on Your Site
• Custom Fonts in Signup Forms
• How to Add Custom Fonts in Email Templates (new editor)
• How to Add Custom Fonts in Email Templates

We have some community posts regarding similar issues as well.

Thanks!
Alex