🖼️Template & Styling

Main content

The heart of the PDF content, isn't it? For this, you need to send a whole HTML document.


    <title>Your title here</title>
        // put all styles here
    // add magic here

Remote paths for images, fonts (e.g., Google Fonts), etc., work too.

TailwindCSS also works great, give it a go 😎.

If you want to use footer or header or both, you need to send a whole HTML document, e.g.:

    body {
        font-size: 12px;
        margin: auto 20px;
<p><span class="pageNumber"></span> of <span class="totalPages"></span></p>

The following classes allow you to inject printing values:

  • date - formatted print date.

  • title - document title.

  • url - document location.

  • pageNumber - current page number.

  • totalPages - total pages in the document.


  • No JavaScript.

  • The CSS properties are independent of the ones from the HTML document.

    • Also simple CSS only.

  • footer.html CSS properties override the ones from header.html.

  • Images only work using a base64 encoded source - i.e., data:image/png;base64, iVBORw0K....

  • background-color and color CSS properties require an additional -webkit-print-color-adjust: exact CSS property to work.

  • Assets are not loaded (i.e., CSS files, scripts, fonts, etc.).

    • For fonts, check out the section below.

  • Background form fields do not apply.


Main content can use remote URLs for fonts

Recommended CDN: Google Fonts or CDNFonts

Here are the built-in fonts that you can define in your styles.

Microsoft True Type fonts

  • Andale Mono

  • Arial Black

  • Arial (Bold, Italic, Bold Italic)

  • Comic Sans MS (Bold)

  • Courier New (Bold, Italic, Bold Italic)

  • Georgia (Bold, Italic, Bold Italic)

  • Impact

  • Times New Roman (Bold, Italic, Bold Italic)

  • Trebuchet (Bold, Italic, Bold Italic)

  • Verdana (Bold, Italic, Bold Italic)

  • Webdings


  • beng

  • hosny-amiri

  • lklug-sinhala

  • lohit-guru

  • lohit-knda

  • samyak-gujr

  • samyak-mlym

  • samyak-taml

  • sarai

  • sil-abyssinica

  • sil-padauk

  • telu thai-tlwg

  • ttf-wqy-zenhei

  • arphic-ukai

  • arphic-uming

  • ipafont-mincho

  • ipafont-gothic

  • uncore

  • crosextra-caladea

  • crosextra-carlito

  • dejavu

  • dejavu-extra

  • liberation

  • liberation2

  • linuxlibertine

  • noto-cjk

  • noto-core

  • noto-mono

  • noto-ui-core

  • sil-gentium

  • sil-gentium-basic

Page Break

In case that you want to have a page break, you can use this CSS styling to achieve that:

        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
        <title>Paginated HTML</title>
             div.page {
                page-break-after: always; 
                page-break-inside: avoid;
        <div class="page">
            <h1>This is Page 1</h1>
        <div class="page">
            <h1>This is Page 2</h1>
        <div class="page">
            <h1>This is Page 3</h1>

Last updated