How do I use custom fonts in custom HTML ZIP templates for in-app messages?

Custom HTML ZIP templates for in-app messages load as web pages inside a device's WebView. They cannot access custom fonts uploaded to the built-in visual editor. Using @font-face with a local() source definition will also fail if the font is not already installed on the user's device.

To display custom fonts correctly, use one of these two methods.

Include the font in the ZIP file

This method works offline and is the most reliable option.

Place your font file (such as .woff2 or .ttf) inside your ZIP archive alongside your HTML and CSS files.
Reference the font in your CSS using a relative path:

@font-face {
  font-family: "MyCustomFont";
  src: url("MyCustomFont.woff2") format("woff2");
}

Host the font on a CDN

Upload your font file to a public Content Delivery Network (CDN) or your own web server.
Reference the absolute URL of the hosted font file in your CSS:

@font-face {
  font-family: "MyCustomFont";
  src: url("https://cdn.example.com/fonts/MyCustomFont.woff2") format("woff2");
}

Include the font in the ZIP file

Host the font on a CDN

Comments

Have a question?

Articles in this section