Add embedded fonts through the @font-face rule

Learn how to embed custom fonts in HTML templates using the @font-face rule and base64 encoding.

You can also use the @font-face rule to load custom fonts through a base64 encoding into HTML templates.

To load a custom font into the HTML template through the @font-face rule, perform the following steps:

Prepare your custom font file that has a suffix like .ttf, .woff, .eot, .svg, and so on.You can download free fonts from the Internet, such as Google Web Fonts where you can select a font and then download it. You can also purchase commercial fonts.
Do the base64 encoding.
- In OS X or Linux, type the built-in base64 command in the terminal or shell: $ base64 -i myfont.ttf -o fontbase64.txt
- For Windows, you must download a program to encode in base64 (several free/Open Source tools are available).
Drag the HTML component into the Row block in the HTML template.
In the HTML template, click the HTML block. The Content panel is displayed on the right of the template editor.

In the HTML section, use the following HTML code example in the HTML editor where you replace <<copied base64 string>> with the contents you copy from the font file:

<style>
@font-face {
font-family: 'my_font';     
src: url(data:font/truetype;charset=utf-8;base64,<<copied base64 string>>) format('truetype');
font-weight: normal;
font-style: normal;
}
</style>

If you use other types of fonts, the values of the data and format fields become different. For example, if you use the Web Open Font Format ( .woff ), use the following HTML code example:

<style>
@font-face {
    font-family: 'my_font';
    src: url(data:application/x-font-woff;charset=utf-8;base64,<<copied base64 string>>) format('woff');
    font-weight: normal;
    font-style: normal;
}
</style>

Configure the new font to some text and a table by using the following HTML code examples:

<h1 style="font-family:my_font;">Charge Details</h1>

<style>
  .my_font {
    font-family: my_font;
    font-size: 28px;
  }
</style>
<div>
  <span class="my_font">
      Hello Free Font!
  </span>
</div>

<style>
      #u_content_custom_generic_table_2{
        word-break: break-all;
      }
      .u_content_custom_generic_table_2.table-grid {
        width: 100%;
        table-layout: fixed;
        border-collapse: collapse;
      }
      .u_content_custom_generic_table_2.table-grid tr td,
      .u_content_custom_generic_table_2.table-grid tr th{
        word-break: break-word;      
      }
      .u_content_custom_generic_table_2.table-grid tr th{
font-family:my_font;font-size:14px;text-align:center;color:#464C51;background-color:#F6F7F8;padding-left:12px;padding-right:12px;padding-top:12px;padding-bottom:12px; text-decoration: auto; font-weight: normal; font-style: normal; border-top: 1px solid #E0E0E0; border-right: 1px solid #E0E0E0; border-left: 1px solid #E0E0E0; border-bottom: 1px solid #E0E0E0;
      .u_content_custom_generic_table_2.table-grid tr td{
font-family:my_font;font-size:14px;text-align:left;color:#000000;background-color:#FFFFFF;padding-left:12px;padding-right:12px;padding-top:12px;padding-bottom:12px; text-decoration: auto; font-weight: normal; font-style: normal; border-top: 1px solid #E0E0E0; border-right: 1px solid #E0E0E0; border-left: 1px solid #E0E0E0; border-bottom: 1px solid #E0E0E0;
      }
</style>

When you preview, the font is applied to the text, the table header, rows, and columns. The following image shows an example of the preview result:

Welcome to Zuora Product Documentation

Explore our rich library of product information

Add embedded fonts through the @font-face rule

zuora-footer