CODEWITHSUNDEEP
htmlwkhtmltopdffont-awesome
István
István

Reputation: 5127

Print HTML containing Font Awesome icons with wkhtmltopdf

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.

Upvotes: 6

Views: 6570

Answers (4)

opoet
opoet

Reputation: 11

I recently ran into this issue while running wkhtmltopdf on a M4 Mac mini. Seems the faster speed led to a race condition where the fonts would only sometimes render correctly. For me to get it to work, I had to edit the fontawesome css and only left the src: for the SVG version of the font (removed WOFF, WOFF2, TTF, etc).

After doing that the font rendered correctly every time.

Upvotes: 1

Laria Chabowski
Laria Chabowski

Reputation: 93

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)

Upvotes: 6

Jos&#233; Ignacio
Jos&#233; Ignacio

Reputation: 21

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.

Upvotes: 2

Levi
Levi

Reputation: 657

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

Upvotes: 0

Related Questions