wkhtmltopdf always apply default font for Arabic characters

Question

I have a text that can be edited in tinymce web editor. After finishing, the text can be exported to PDF file using wkhtmltopdf 0.12.5 (with patched qt) and snappy as the wrapper.

Now there is multiple fonts to chose from and after a little research I managed to make it so that the font will be rendered correctly after exporting to PDF for English. However, when the text is in Arabic it always renders with a default font and wkhtmltopdf ignores the font that was selected in the editor.

Here is the code:

$htmlString = '<!DOCTYPE html><html><head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <link href="https://fonts.googleapis.com/css?family=Book+Antiqua|Andale+Mono|Arial|Arial+Black|Comic+Sans+MS|Courier+New|Georgia|Helvetica|Impact|Tahoma|Terminal|Times+New+Roman|Trebuchet+MS|Verdana|Webdings|Wengdings&;subset=latin" rel="stylesheet" type="text/css">
            <style>
            p, h, div, tr, ul, ol{page-break-inside: avoid !important;}
            </style>
            </head><body>' . $request->content . '</body></html>';
            $options = [
                'enable-smart-shrinking' => true,
            ];
            $pdf = App::make('snappy.pdf.wrapper');
            $pdf->loadHTML($htmlString);
            return $pdf->setOptions($options)->inline(date('d-m-y_h:i:s_a') . '.pdf');

Note that the font shows correctly in the editor on the browser but it doesn't get applied on the generated PDF document. The content of the page is a simple paragraphs and headers nothing too fancy like tables or images.

Page as html

Page As PDF

I tried adding the fonts then using @font-face and I also tired to changing the subset in the google fonts link to Arabic but nothing worked.

Please advise.

Thanks in advance :)

June Millan June Millan · Accepted Answer · 2020-08-12T18:35:25

I encountered a similar issue while working on an Odoo Report which uses wkhtmltopdf 0.12.5. The solution that worked for me was to use @font-face and add the base64-encoded font file as source:

@font-face{
    font-family: 'Arial';
    src: url(data:font/truetype;charset=utf-8;base64,<BASE64 CODE HERE>);
}

/* apply the font to all */
html * {
    font-family: Arial;
}

to get the base64 code, you may use a tool such as this or this. just upload the font file there and copy the output base64 code and put it in place of <BASE64 CODE HERE> in the above sample CSS

wkhtmltopdf always apply default font for Arabic characters

1 Answers