Try the below coding methods to use a custom font in an HTML email.
@IMPORT METHOD
Any web font services that provide a link can be used with an @import. Simply place the code in the <style type="text/css"> of your email. It's suggested to place this in one of the first elements in the style sheet. For example:
@import url('https://fonts.googleapis.com/css?family=Montserrat');TIP: Keep your code clean with an external style sheet. All inboxes that support @import also support an external style sheet, so you can keep your styles organized and clutter-free.
<LINK> METHOD
This method tends to perform slightly better than the @import method. However, if this method loads your HTML code from top to bottom, the large font files could cause a slight load time delay. Similar to the @import method, the link used should either be one you have from hosting your fonts locally or it should be identified within the font provider. Place this line of code in the <head> of the email.
<link href='https://fonts.googleapis.com/css?family=Monsterrat" rel="stylesheet">
TIP: Enter the name of your font at the end of your font stack to ensure it works.
@FONT-FACE METHOD
With this method, you'll create an @font-face by including the font family name, the font style, and the font weight within the code. Then, you'll place the URL in the @font-face to reference where those font files are hosted. File formats usually exist in one of the following file formats:
Embedded OpenType (EOT)
Web Open Font Formant (WOFF)
Web Open Font Format 2 (WOFF2)
OpenType-SVG (SVG)
TrueType Font (OTF/TTF)
@font-face {
font-family: 'DESIRED FONT NAME';
src: url('EOT FONT LINK'.eot');
src: url('EOT FONT LINK') format('embedded-opentype'),
url('WOFF2 FONT LINK') format('woff2'),
url('WOFF FONT LINK') format('woff'),
url('TRUETYPE FONT LINK') format('truetype'),
url('SVG FONT LINK'format('svg');
font-weight: 400;
font-style: normal;
}
TIP: Of the format options, .woff and .otf/.ttf have the best support. These files also need to be hosted on a publicly accessible web server or Listrak's Media Library in order for them to display in an email.