Templates: Use custom fonts in PDF documents

HostBill uses mPDF 8 to generate PDF documents. You can refer to its documentation for further guidance on configuration files: https://mpdf.github.io/

Uploading font files

To be able to use custom fonts in pdf documents you have to upload those font files to  hbf/libs/mpdf/ttfonts directory.

Only True Type Font (ttf) files are supported, if you have fonts in other format you will have to convert it to ttf. 

In this guide we will use Open Sans font with four styles (bold, italic, ...). If your font has only one file you should treat it as a "regular" style.

In case of Open Sans fonts you should have the following file structure:

hbf/libs/mpdf/ttfonts/OpenSans-Regular.ttf
hbf/libs/mpdf/ttfonts/OpenSans-Bold.ttf
hbf/libs/mpdf/ttfonts/OpenSans-Italic.ttf
hbf/libs/mpdf/ttfonts/OpenSans-BoldItalic.ttf

Setting up custom fonts - after 2023-11-20 release

Each  font that you want to use has to be added into $config array under mPDF.fontdata key in includes/config.php file:

Font family name (array key) used in configuration has to be lower case, without spaces. If you use "OpenSans" as your css font-familly HostBill will look for "opensans".

Font file name (OpenSans-Regular.ttf) is case-sensitive.

$config['mPDF.fontdata'] = [
    'opensans' => [
        'R' => 'OpenSans-Regular.ttf',
    ]
];

You can define 4 font styles under the same name, the R (Regular) variant is required for each font family, B (Bold), I (Italic), BI (Bold Italic) are optional.

If you specify additional variants it will allow mpdf to use correct fonts if you use font-weight or font-style properties in your CSS.

$config['mPDF.fontdata'] = [
    'opensans' => [
        'R' => 'OpenSans-Regular.ttf',
        'B' => 'OpenSans-Bold.ttf',
        'I' => 'OpenSans-Italic.ttf',
        'BI'=> 'OpenSans-BoldItalic.ttf'
    ]
];

Setting up custom fonts - before 2023-11-20 release

Each font that you want to use has to be added in hbf/libs/mpdf/config_fonts.php configuration file.

Font family name (array key) used in configuration has to be lower case, without spaces. If you use "OpenSans" as your css font-familly HostBill will look for "opensans".

Font file name (OpenSans-Regular.ttf) is case-sensitive.

$this->fontdata = array(
    //...
    'opensans' => [
        'R' => 'OpenSans-Regular.ttf',
    ],
    //...
);

You can define 4 font styles under the same name, the R (Regular) variant is required for each font family, B (Bold), I (Italic), BI (Bold Italic) are optional.

If you specify additional variants it will allow mpdf to use correct fonts if you use font-weight or font-style properties in your CSS.

$this->fontdata = array(
    //...
    'opensans' => [
        'R' => 'OpenSans-Regular.ttf',
        'B' => 'OpenSans-Bold.ttf',
        'I' => 'OpenSans-Italic.ttf',
        'BI'=> 'OpenSans-BoldItalic.ttf'
    ],
    //...
);

Accessing fonts

You will have to define font-family directly in html when editing invoice template. To do that click on "html" button available in formatting tools, this will open a popup with html source for you to edit.

If you want to apply your font to the whole document, add or replace your style at the beginning with this code: 

<style type="text/css"><!--
    body {
        font-family: OpenSans;
    }
--></style>

If you want to use this font only on some elements, you can add your own css rules or use inline styles:

<div style="font-family:OpenSans;"> Hello World </div>