Skip to main content
Solved

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

  • 27 April 2021
  • 1 reply
  • 665 views

Forum|alt.badge.img+2
  • Contributor I

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. 

Best answer by elisegaines

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/ 

 

View original
Did this topic or the replies in the thread help you find an answer to your question?

1 reply

Forum|alt.badge.img+25
  • Customer Ed.
  • 86 replies
  • Answer
  • April 27, 2021

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/