Configure fonts in HTML templates

Last updated
Save as PDF

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
Roboto
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.

Note that if you want irregular currency symbols displayed on the generated PDF, use the Roboto font from the font family.

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:

In the HTML template editor, drag the HTML component into the Row block.
In the HTML template, click the HTML block.
The Content panel is displayed on the right of the template editor.
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'>
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>

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:

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 myfont.ttf > fontbase64.txt
- For Windows, you have to 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, cursive;">Charge Details</h1>

<style>

                  .my_font {

                    font-family: my_font, cursive;

                    font-size: 28px;

                  }

                </style>

                <div>

                  <span class="my_font">

                      Hello Free Font!

                  </span>

                </div>

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.