Print HTML containing Font Awesome icons with wkhtmltopdf

Question

I want to print an HTML page, that contains Font Awesome icons, with wkhtmltopdf. I saw this issue with Google fonts: Google Web Fonts and PDF generation from HTML with wkhtmltopdf, but this way is not working.

Arena

Answer 1

Add the .woff file in your Font Awesome lib dir (no base64 in css) and it should work.

Wakerly

Can you explain this further with an example? – Impressionist

Answer 2

I solved this by inlining the TTF version of the file like this:

<style type="text/css">
@font-face {
    font-family: 'FontAwesome';
    src: url(data:application/x-font-truetype;base64,<< insert base64 encoded fontawesome-webfont.ttf here >>) format('truetype');
    font-weight: normal;
    font-style: normal;
}
</style>

And then inlining the font-awesome.css file. BUT you need to remove the @font-face at-rule of that file, since wkhtmltopdf doesn't like multiple @font-faces that define the same font. You can do that by either inlining a modified version of the file or by using a RegEx to remove the at-rule (e.g.: @font-face\s*\{[^\}]*\}).

(I tried leaving the original @font-face intact, hoping a later definition would overwrite it, but that didn't work. The CSS standard doesn't seem to define what happens when two @font-face for the same font appear, if I read it correctly)

Inbound

Worked for me too with headless chromium print to pdf. Thanks! – Substituent

Answer 3

Do you have any examples ??

I saw something similar in this issue: https://github.com/mileszs/wicked_pdf/issues/587

The filename contains a carriage return character, which is not a valid display symbol. The glyph you're seeing is one usually research for private Unicode character areas.

Narine

I have the same problem – Arleanarlee