How to Add Google Fonts in Email Template

Using custom fonts in your email can improve the overall look and feel, especially if it’s consistent with your website or the typography you use in your branding. However, it’s important to note that custom fonts don’t always render properly for every email client. Therefore, it’s important to use a “fallback font” whenver you choose to use a custom font. In this quick tutorial, we’ll show you how to use custom fonts from Google Fonts, and how to properly set a “fallback font” in case the email client doesn’t support the font you choose.

If standard fonts work for your branding, you can simply use the handful of fonts that are considered “web safe fonts” which will be rendered properly in most of the email clients and devices. These web safe fonts are already available in Klaviyo. You can select the font for your email content in Klaviyo’s template builder, in the “Styles” section.

If you want to use a font that is not in Klaviyo’s default font list, then our first recommendation is using Google Fonts. This is Google hosted service that is free to use and contains nearly 1000 fonts for you to choose from.

When you find the font you want to use on Google Fonts service, follow these steps to implement the font in your email template.

Go to Google Fonts, find the font that you want to use and click on the “plus” sign as shown in the image below.

After clicking on the “plus” sign, a black bar will appear at the bottom of the page and it will say “1 Family Selected”. Click on the bar to expand the options.

Navigate to “EMBED” and click on “@IMPORT” to find the import URL of the font.

The URL that you’ll need is inside the brackets. In our example the URL is:

https://fonts.googleapis.com/css?family=Roboto&display=swap

Before we proceed with the next step you need to understand how custom fonts work in Klaviyo.

The first important thing you need to remember is that you only need to apply the custom code in the first “Text Block” of the email template and the font will change for entire email. The next thing is that you need to specify for which HTML elements this font will affect.

To import the custom font, you need to enter the font’s URL into this line of code:

<style type="text/css">
@import url('INSERT_FONT_URL');
p, h1, h2, h3, h4, ol, li, ul { font-family: 'INSERT_FONT_NAME', 'INSERT_A_FALLBACK_FONT';  }
</style>

If we break down this line of code, you can see that:

• @import url: This is the part where you add the custom font
• p, h1, h2, h3, h4, ol, li, ul: This are the elements that will be affected by the imported font. If you don’t want some of the elements in your email template to be affected by the imported font, you can delete them from this list.
• font-family: In the first quotes you need to replace it with the name of the font you’re importing, and in the second quotes you need to put a fallback font. A fallback font is a font that will be used in case the font you imported doesn’t render. You should use a web-safe fallback font that you can find in Klaviyo’s list of fonts.

After you add the necessary information in the code, you can proceed to applying it in your email template.

Although you can add the code in any of your text blocks and it will work fine, we recommend creating a new text block only for this purpose.

Drag and drop a Text Block at the very top of your email template.

Delete the sample text from the block and click on the “Source” button on the top right corner.

Apply the line of code. After adjusting and applying the code it should look like this.

Click “Save” on the top right corner of the Text Block settings and if everything was properly set, you should see the font change immediately.

After you finish creating your “font import” block, we strongly recommend to save the block so you can have a backup for yourself in case you accidentally delete it. Also, saved blocks can be reused in any email template, so saving the block can save you a lot of time and effort in the future and to maintain consistency. If you’re not sure how saved blocks work, you can find out more in our tutorial “How to Use Saved Blocks in Klaviyo”.