Question

The font shows correctly in klaviyo editor/preview but the final delivered font is different

  • 26 January 2022
  • 1 reply
  • 47 views

Badge

I am using gmail web and mobile app to view the final emails.

The button fonts (and some other text fonts) look fine in klaiyo preview, but not in the email sent. 

Images and code below for reference: 

  1. klaviyo preview:
email fonts on klaviyo preview

 

  1. Gmail web:
email fonts on gmail web 

Code:

<style>@font-face { font-family: Axiforma-Book;
src: url('link to axiforma-book.woff') format('woff'); }

@font-face { font-family: Axiforma-Bold;
src: url('link to axiforma-bold.woff') format('woff'); }

@font-face { font-family: Halogen-Black;
src: url('link to halogen-black.woff') format('woff'); }

@font-face { font-family: Hendersen-Slab;
src: url('link to henderson-slab.woff') format('woff'); }

p, .kmButton, ::marker, li, div, div span { font-family: Axiforma-Book !important; font-weight: normal !important; font-size: 15px !important; color: #2D2A2B; letter-spacing: 1.5px !important; line-height: 2 !important; }
h1, .kmTextBlockInner { font-family: Halogen-Black !important; font-weight: normal; font-size: 24px !important; color: #2D2A2B; letter-spacing: 3.6px !important; line-height: 1 !important; }

h3, .kl-button p { font-family: Axiforma-Bold !important; font-weight: normal; font-size: 15px !important; color: #2D2A2B; letter-spacing: 1.5px !important; line-height: 1 !important;
}
li:first-child { margin-top: -12px; }

h2 { font-family: Hendersen-Slab !important; font-weight: normal; font-size: 18px !important; color: #2D2A2B; letter-spacing: 2.7px !important; line-height: 1 !important;
}

.copyright div span {
font-family: Axiforma-Book !important; font-weight: normal !important; font-size: 7.5px !important; color: #2D2A2B; letter-spacing: 1.13px !important; line-height: 1 !important;
}

.copyright div {
line-height: 1 !important;
}
</style>

What can I do to make the emails look just like the preview? Any help is appreciated, thanks!


1 reply

Userlevel 6
Badge +39

.

Reply