Solved

How do I add spacing (tracking) for custom fonts?

  • 27 April 2021
  • 1 reply
  • 622 views

Badge +2
  • Contributor I
  • 0 replies

Is there a way to include multiple custom fonts with additional parameters for tracking (space between each letters0? We are using 2 custom google fonts but the automatic spacing does not fit our needs. 

icon

Best answer by elisegaines 27 April 2021, 22:19

View original

1 reply

Userlevel 5
Badge +25

Hey @WVN! That’s definitely possible. Here’s an example based on our guide to using multiple custom fonts in a template (https://help.klaviyo.com/hc/en-us/articles/115005256008-How-to-Add-Custom-Fonts-in-Email-Templates#multiple-google-fonts7)

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

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

In the above code, the first custom font (used for styles p, ol, li, and ul) will have slightly wider letter spacing of 0.1 em, due to the letter-spacing: 0.1em property I’ve added. You can also use pixels instead of em! More info here: https://cssreference.io/property/letter-spacing/ 

 

Reply