Hi @amandafeller, this is a great question. The short answer is yes, there is code you’ll need to add to your template to enable this. The basic code for each hosting method (self-hosting, Google, or Adobe Typekit) is available in our article How to Add Custom Font in Email Templates, and you’ll need to modify this base code as demonstrated below to show different fonts for different H tags.

A quick caveat: this does increase the risk of an email being clipped by an inbox provider due to the added code, and not all email clients will render custom fonts. I definitely recommend testing an email on as many clients as you can before implementing across all template.

For adding any custom font, you’ll need to include a snippet in your first text block’s source code, the syntax varies depending on how you host your fonts, but the suggested code below is specific for self-hosted font since you stated you are hosting yours on Shopify.

To show multiple different fonts, we recommend including 3 separate snippets within that first block, and each will be specific to one font and H tag. You do not need to include these snippets in every text block, just the first. 

<style type="text/css"> @font-face { font-family: 'Neutra Text'; src: url('LINK TO FONT 1'); /* IE9 Compat Modes */ src: url('LINK TO FONT 1'') format('embedded-opentype'), /* IE6-IE8 */ url('LINK TO FONT 1'') format('woff'), /* Modern Browsers */ url('LINK TO FONT 1'') format('truetype'), /* Safari, Android, iOS */ url('LINK TO FONT 1'') format('svg'); /* Legacy iOS */ } h1 { font-family: "Neutra Text", Verdana; font-weight: 600; }  </style>

<style type="text/css"> @font-face { font-family: 'Neutra Text'; src: url('LINK TO FONT 2'); /* IE9 Compat Modes */ src: url('LINK TO FONT 2'') format('embedded-opentype'), /* IE6-IE8 */ url('LINK TO FONT 2'') format('woff'), /* Modern Browsers */ url('LINK TO FONT 2'') format('truetype'), /* Safari, Android, iOS */ url('LINK TO FONT 1'') format('svg'); /* Legacy iOS */ } h2 { font-family: "Neutra Text", Verdana; font-weight: 600; }  </style>

<style type="text/css"> @font-face { font-family: 'Neutra Text'; src: url('LINK TO FONT 3'); /* IE9 Compat Modes */ src: url('LINK TO FONT 3'') format('embedded-opentype'), /* IE6-IE8 */ url('LINK TO FONT 3'') format('woff'), /* Modern Browsers */ url('LINK TO FONT 3'') format('truetype'), /* Safari, Android, iOS */ url('LINK TO FONT 3'') format('svg'); /* Legacy iOS */ } h3 { font-family: "Neutra Text", Verdana; font-weight: 600; }  </style>

Replace each instance of “Neutra Text” with the font family you wish to use, and add your links where indicated.

Some troubleshooting tips to try if this doesn’t work at first: 

• Make sure you have all three fonts added to your site’s asset library and that the links to the fonts are public
• Try refreshing the editor after saving the text block if any existing blocks do not update right away

Please let us know if this helps, and also let us know here if it doesn’t work so that other Community members might be able to chime in with their experience or solutions!

Hi Julia!

Oh this was incredibly helpful -- thank you so much! 

I am still not able to pipe the fonts into Klaviyo. Right now, my Shopify store is password protected, which is where I have all the different format files living for the fonts. I am able to get 1 of my 3 fonts to come through with the code. I am not sure if its because the site is password protected; do you know why 1 of the 3 would work while the others don’t?

I am also unable to change the size, font, or heading type after pasting the code in. It locks me out of clicking on any of those options or making changes.

Do you have any ideas on how to fix that? Thank you so much again!

Amanda

Hi @Julia.LiMarzi 

This was incredibly helpful -- thank you so much! 

I am still not able to pipe the fonts into Klaviyo. Right now, my Shopify store is password protected, which is where I have all the different format files living for the fonts. I am able to get 1 of my 3 fonts to come through with the code. I am not sure if it's because the site is password protected; do you know why 1 of the 3 would work while the others don’t?

I am also unable to change the size, font, or heading type after pasting the code in. It locks me out of clicking on any of those options or making changes.

Do you have any ideas on how to fix that? Thank you so much again!

Amanda

Hi @amandafeller 

Interesting that one would work but not all three. I have a couple of questions that might help pinpoint the issue:

• Just to confirm, are all 3 codes snippets within one text box? 
• Is the first snippet the only one displaying the font?
  • If so, try changing which font or snippet is listed first. This will pinpoint if the problem is having 3 snippets of that code or the font itself is blocked from showing.
• Are all your font files .woff format? The sample code above uses that, but you may be using .woff2 on your store. If that’s the case, try updating the snippet for the relevant fonts to say .woff2 instead of .woff.

To answer the second question, because you are using a custom font that isn’t a programmed option in Klaviyo’s template editor, I believe you’ll need to use HTML to manually set and update the text formatting within the source code. 

@amandafeller like Julia mentioned, test it out in all email clients and make sure you also test it on mobile. What we've found is that most times the amount of effort it takes to get it right is not in comparison to the benefits or results (a lot of clients don't render the font and fallback to their own standard fonts). One workaround is to add images with text whenever you need these custom fonts. 

Hi @Julia.LiMarzi 

I tried the .woff2 option, and made sure they were all in one text box. Strangely, its font #2 that is working out of the 3.

As a work around, is using Google fonts that are similar to my custom fonts the same coding as using a custom hosted font that you gave me above? Do you think Google fonts would be more compatible within Klaviyo? I saw the code line on that link you sent for Google fonts, but that is just for uploading a single font rather than having 3. 

Would a Google font also allow me to select different headers and sizing, as opposed to a custom coded font?

Also, thank you @Omar  for that tip -- that is definitely what I am finding, and a great workaround idea! 

Hi @amandafeller, Yes with Google Fonts you should be able to use multiple fonts as well. 

The code is slightly different (it’s much shorter) and all of the instructions and the sample code are in the doc for adding a custom font to an email template. Within one text block’s source code, copy and paste the code snippet three times, and add your three different fonts to it, removing any text styles you don’t want for each font. I was able to create a sample of this in my own Klaviyo test account to help illustrate it. Apologies for not being able to do the same for a self-hosted custom font

You will also be able to use the HTML editor to adjust font size, color, format, and orientation. You may need to save the source code after adding the snippets before seeing the change to any existing text.

@Julia.LiMarzi  You are awesome -- thank you so much for helping me troubleshoot this. This worked!!  The fonts are definitely close enough, and this was much easier. Thank you so much again, I appreciate you!