pythoncsspdfjinja2pdfkit

Choosing Font in PDFs with pdfkit and jinja

I am having a hard time setting the font to Open Sans in my PDF document. I am using python to create two html files with jinja templates, then converting them each to PDF files before merging them together. All I can say is that sometimes one of these PDFs has the correct font, sometimes the other, but never at the same time despite having the same code. I am baffled by the inconsistency too as it doesnt seem to be related to changes I make. I have tried downloading the font style .tff file in case the error was caused by failing to download from across the internet but that hasnt helped.

The problem seems to be both in my configuration of the html/css and in the conversion to PDF. The current setting is like this:

<head>
  <meta name="user-style-sheet" content="True" charset="utf-8" />
</head>

<style>
    /* @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400&display=swap'); */

    @font-face {
        font-family: 'Open Sans';
        src: url('/templates/shared/Open_Sans/static/OpenSans_Condensed-Light.ttf');
    }

    body {
        font-family: 'Open Sans';
    }

    p {
        font-family: 'Open Sans';
        font-size: medium;
    }

</style>

What am I missing?

Solution

  • WkHTMLtoX is retired (end of life) and thus no more security fixes. So you should ensure to use the latest.

    The last security measure was to reintroduce tighter security, thus for local users to load fonts locally you need to include related file switches. Thus the local commands would be on Windows:-

    wkhtmltopdf --allow "%cd%" --enable-local-file-access WkHTML-IN.htm WkHTML-OUT.pdf

    enter image description here

    This allows both fonts referenced from windows\fonts or custom local.ttf ones to be allowed.

    The below HTML loaded fonts show one example from %CD% (current directory after a download) and one referenced from windows fonts directory, to show just two methods.

    condensed intentionally to just show style lock 'n' load 

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title of the document</title>

<style>
    @font-face { font-family: 'OpenSans'; font-style: normal; font-weight: normal; src: url("./OpenSans_SemiCondensed-Light.ttf") format("truetype"); }
    @font-face { font-family: 'Consolas';   font-style: normal; font-weight: normal; src: url("file:///c:/windows/fonts/consola.ttf") format("truetype"); }
    body { font-family: 'OpenSans'; font-weight: 800; }
    p { font-family: 'OpenSans'; font-style: italic; font-size: medium; font-weight: 200; }
   code, pre { font-family: 'Consolas'; font-size: medium; font-weight: 200; }
</style>


</head><body >
    Google fonts cannot generally be used in applications such as WkHtmltox even with a CORS policy etc.<br>

    <p>This approach will not work<br>style="font-family: OpenSans;"
    &LT;link rel="preconnect" href="https://fonts.googleapis.com"&gt;<br>
    &LT;link rel="preconnect" href="https://fonts.gstatic.com" crossorigin&gt;<br>
    &LT;link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet"&gt;<br>
<br></p>

What is needed is a local file TTF font as below and the --allow %cd% switch</br>

<code><pre>
    @font-face {
      font-family: 'OpenSans';
      font-style: normal;
      font-weight: normal;
      src: url("./OpenSans_SemiCondensed-Light.ttf") format("truetype");
    }
</pre></code>

Run with <br>
> wkhtmltopdf --allow "%cd%" in.htm out.pdf<br>
or to  --allow "C:\Windows\Fonts"<br>
wkhtmltopdf --allow "%cd%"  --enable-local-file-access in.htm out.pdf<br>

</body></html>