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:
- klaviyo preview:

- 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!