Configure fonts in HTML templates
The following fonts are available in the HTML template editor by default:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The list of default fonts might change 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 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, with 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 can 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 thehref
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=Amaranth' 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:Amaranth;'>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_reactChargeDetails_1.table-grid tr th{ font-family:Amaranth,helvetica,sans-serif;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_reactChargeDetails_1.table-grid tr td{ font-family:Amaranth,helvetica,sans-serif;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; }
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:
Add embedded fonts through the @font-face rule
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 myfont.ttf > fontbase64.txt
- For Windows, you must download a program to encode in base64 (several free/Open Source tools are available).
- In OS X or Linux, type the built-in base64 command in the terminal or shell:
- 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
andformat
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>
Or
<style> .my_font { font-family: my_font; 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;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: