I understand and have the basic code for adding a custom font to match my website (files hosted through Shopify).
However, I have 3 brand fonts, and I was hoping to assign different custom fonts to the different header font styles, and have H1 / H2 / H3 all be unique fonts.
Does anyone have any insight or have the code to do this? Any help would be so appreciated!!
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.
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!
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!
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!
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.
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!
By clicking “Accept All Cookies,” you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts.
Privacy Preference Center
Your Privacy
Strictly Necessary Cookies
Performance Cookies
Functional Cookies
Targeting Cookies
Site Analytics
Your Privacy
When you visit any website, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalized web experience. Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and change our default settings. However, blocking some types of cookies may impact your experience of the site and the services we are able to offer.
Privacy Notice
Strictly Necessary Cookies
Always Active
These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms. You can set your browser to block or alert you about these cookies, but some parts of the site will not then work. These cookies do not store any personally identifiable information.
Performance Cookies
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us to know which pages are the most and least popular and see how visitors move around the site. All information these cookies collect is aggregated and therefore anonymous. If you do not allow these cookies we will not know when you have visited our site, and will not be able to monitor its performance.
Functional Cookies
These cookies enable the website to provide enhanced functionality and personalisation. They may be set by us or by third party providers whose services we have added to our pages. If you do not allow these cookies then some or all of these services may not function properly.
Targeting Cookies
These cookies may be set through our site by our advertising partners. They may be used by those companies to build a profile of your interests and show you relevant adverts on other sites. They do not store directly personal information, but are based on uniquely identifying your browser and internet device. If you do not allow these cookies, you will experience less targeted advertising.
Site Analytics
These cookies record your visit to our website, and are used to track your visit including information such as: web page interactions (clicks, hovers, focus, mouse movements, browsing, zooms and other interactions), referring web page/source through which you accessed the Sites, heatmaps and scrolls, screen resolution, ISP, and statistics associated with the interaction between device or browser and the Sites. If you are accessing our Services with a European IP address, you have been asked to consent to the use of these cookies (you are free to deny your consent).