Skip to main content

Configure fonts in HTML templates

Zuora

Configure fonts in HTML templates

The following fonts are available in the HTML template editor by default:

  • Andale Mono
  • Arial
  • Arial Black
  • Baskerville
  • Bodoni MT / Bodoni 72
  • Book Antiqua
  • Cabin
  • Calibri
  • Calisto MT
  • Cambria
  • Candara
  • Century Gothic
  • Cinzel
  • Comic Sans MS
  • Consolas
  • Copperplate Gothic
  • Courier New
  • Crimson Text
  • Dejavu Sans
  • Didot
  • Fauna One
  • Fjalla One
  • Franklin Gothic
  • Garamond
  • Georgia
  • Gill Sans
  • Goudy Old Style
  • Helvetica
  • Impact
  • Lato
  • Lobster Two
  • Lora
  • Lucida Bright
  • Lucida Sans
  • Microsoft Sans Serif
  • Montserrat
  • Mulish
  • Noto Sans
  • Old Standard TT
  • Open Sans
  • Optima
  • Oswald
  • Pacifico
  • Palatino
  • Perpetua
  • Playfair Display
  • Poppins
  • Raleway
  • Rockwell
  • Rubik
  • Segoe UI
  • Source Sans Pro
  • Space Mono
  • Spectral
  • Symbol
  • Tahoma
  • Terminal
  • Times New Roman
  • Trebuchet MS
  • Ubuntu
  • Verdana

The list of default fonts might be changed over time. To get the latest list of available default fonts, click the Text block in one HTML template, and then get the list from the font family in the toolbar that is displayed next to the Text block.

Add web fonts through the HTML <link> tag

If you do not want to use any of the default fonts in the HTML template, you can use free web fonts from the Internet, for example, Google Fonts. Google Fonts are free to use, and have more than 1,000 fonts for you to choose from.

You can add a special style sheet link by using the <link> tag and referring to the font in the CSS. The HTML template is able to instruct the template rendering engine to download the font from where the font is hosted.

To add a web font through the HTML <link> tag, perform the following steps:

  1. In the HTML template editor, drag the HTML component into the Row block.
  2. In the HTML template, click the HTML block.
    The Content panel is displayed on the right of the template editor.

  3. In the HTML section, add the <link> tag to link to external style sheets in the HTML component, and use the href attribute to specify the location of the external font family.
    Multiple sites are available on the Internet where you can get free fonts, such as Google Web Fonts
    <link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
  4. Configure the font to apply to some text.
    For example, if you want to apply the font to the heading called "Charge Details", use the following HTML code example:
    <h1 style="font-family:Sofia;">Charge Details</h1>
  5. Configure the font to apply to the text displayed in a table.
    For example, if you want to apply the font to the text in the table called "Charge Details", use the following HTML code example:
            .u_content_custom_generic_table_2.table-grid tr th{
    font-family:Sofia;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:Sofia;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;
          }

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

Add embedded fonts through the @font-face rule

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

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

  1. 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.
  2. Do the base64 encoding. 
    • In OS X or Linux, type the built-in base64 command in the terminal or shell:
      $ base64 myfont.ttf > fontbase64.txt
    • For Windows, you have to download a program to encode in base64 (several free/Open Source tools are available).
  3. Drag the HTML component into the Row block in the HTML template.
  4. In the HTML template, click the HTML block.
    The Content panel is displayed on the right of the template editor.

  5. 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>
  6. Configure the new font to some text and a table by using the following HTML code examples:
    <h1 style="font-family:my_font, cursive;">Charge Details</h1>

    Or

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

    Or

    <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,cursive;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,cursive;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>

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