HTML to PDF – Using custom web fonts

We currently have a working HTML to PDF converter in our project usually used to generate PDF invoices. However, a new requirement requires using a font not usually found on the stock fonts. At this point, I realized that our fonts are different from Web vs the PDF version due to the font missing on the Linux server.

HTML to PDF

We are using the Snappy library (for PHP) in front of wkhtmltopdf to convert HTML pages into PDF. We are using some fonts originally hosted in Google fonts server, however, due to the way wkhtmltopdf works, it requires hosting the font locally in our server.

Here is one of the font we are using: Comfortaa. It uses the woff2 format which does not work properly with our version of wkhtmltopdf. As a workaround, we converted it into true type format which works quite well with wkhtmltopdf.

We used this site to convert woff2 fonts into ttf: WOFF2 to TTF. Once converted, we can now use it in our page.

Integrating fonts

All the converted fonts are hosted in our server so that the wkhtmltopdf tool can use it. Here is our sample CSS definitions for the font. These are all based on the original Google fonts CSS file.

/* cyrillic-ext */
@font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: 400;
    src: local('Comfortaa Regular'), local('Comfortaa-Regular'), url(/assets/font/comfortaa-ttf/Be0CkOtwwI2n86HMhtablRJtnKITppOI_IvcXXDNrsc.ttf) format('truetype');
    unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: 400;
    src: local('Comfortaa Regular'), local('Comfortaa-Regular'), url(/assets/font/comfortaa-ttf/DackuIFgo7Hfy3rR14C3xJtnKITppOI_IvcXXDNrsc.ttf) format('truetype');
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek */
@font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: 400;
    src: local('Comfortaa Regular'), local('Comfortaa-Regular'), url(/assets/font/comfortaa-ttf/UgYUhLCkRUocJ8OZnvelZxJtnKITppOI_IvcXXDNrsc.ttf) format('truetype');
    unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: 400;
    src: local('Comfortaa Regular'), local('Comfortaa-Regular'), url(/assets/font/comfortaa-ttf/Ao3NCHUpHgdVgp2UtibJoRJtnKITppOI_IvcXXDNrsc.ttf) format('truetype');
    unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: 400;
    src: local('Comfortaa Regular'), local('Comfortaa-Regular'), url(/assets/font/comfortaa-ttf/wz1gqe57Mbg11v-OrLlVjhJtnKITppOI_IvcXXDNrsc.ttf) format('truetype');
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: 'Comfortaa';
    font-style: normal;
    font-weight: 400;
    src: local('Comfortaa Regular'), local('Comfortaa-Regular'), url(/assets/font/comfortaa-ttf/qLBu5CQmSMt1H43OiWJ77VtXRa8TVwTICgirnJhmVJw.ttf) format('truetype');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}

And finally, to use it on our page:

body {
    font-size: 14px;
    font-family: 'Comfortaa', cursive;
    color: #333
}

That’s it! PDF looks as fancy as the html version!