WkhtmlToPdf multiple font faces / styles

Question

I've read many, many topics about the hassle with multiple font-styles/faces when using wkhtmltopdf.

We are currently experiencing problems when using Nunito (provided by Google webfonts) in regular style and bold style on the same page. We have tried many (possible) solutions, but none of them has given us a solution yet.

We tried the following solutions, but no one succeeded yet:

• Change the font family name using FontForge
• Convert the fonts using fontsquirrel
• Manually convert fonts to base64 using openssl (mac)
• Convert to base64 http://www.opinionatedgeek.com/dotnet/tools/base64encode/default.aspx
• Using remote includes for fonts (from google webfont)
• Change the fonts to SVG

All the above methods did not work. The browser does render it correctly, but wkhtmltopdf seems to be rendering it different.

We have published a few testcase's on: http://bannes.nl/fonts

If anyone has a suggestion on how to fix this, please let me know. In case you are using mac and have installed wkhtmltopdf, please feel free to test the cases on http://bannes.nl/fonts. I have included the output PDF for every testcase in their directory.

Hope someone has got a suggestion on how to fix this!

Best regards,

Robin

Gabionade

I tried your samples. All are rendered ok except the output pdf format. nubito is rendered ok in both html and pdf. I use WKHTML2PDF to parse bootstrap 3 modals and it works great. – Stroup

Thanks for trying, yes the examples are rendering correctly in most common browsers.. Though I still can't explain why WKHTML is struggling with these fonts (ie Nunito). – Gabionade

Make sure the custom font link is in the head – Stroup

What do you mean exactly? In the examples the custom font is in the head? – Gabionade

Answer 1

I have spent many hours on this same problem trying to get multiple Gotham faces to work together, and was able to resolve the issue. What I have found is that many TTF/OTF fonts that are part of a collection contain a field called "Preferred Family" in the TTF Names table. The value of this field will be the generic collection name, like "Gotham" in all of the font files. So the actual "Family Name" may be unique, for instance "Gotham Book" or "Gotham Light", but the "Preferred Family" will be common among all of the files.

If you inspect the installed font with something like fc-list on Linux, you will see that there are two family names for the font:

Herein lies the problem. When multiple faces in the same family are used in the same PDF, wkhtmltopdf (not sure if this is a webkit thing or a QT thing) seems to choose only one of the fonts in the "Preferred Family" and use it to render all of the text that should be displayed by different fonts within that group.

Luckily, you can delete the "Preferred Family" field from the font files entirely using a tool like FontForge. I did this for all of the variants of the Gotham family that I needed and reinstalled them, which resolved the double family name problem:

This allowed wkhtmltopdf to render all of the font faces correctly on my system.

Hitchcock

great answer - very detailed! – Dancette

Thank you for this. Using FontForge and removing the Preferred Family worked perfectly. – Xantha

Used this solution successfully awhile ago, then stopped with an update... had to go back in and make the "Family Name" property unique (in FontForge this is under Element > Font Info > PS Names > Family Name) – Nickienicklaus

Oh, God bless you! My hat's off, you're great man! – Leeuwarden

Answer 2

• Use this similar utility, backed by more developers: https://github.com/plessl/wkpdf
• if that does not work for you, check that you have the latest version of wkhtmltopdf

If the above does not work at all, you may try a different command line utility, or a robust solution like: "LaTeX": https://www.latex-project.org/

Mm

I see WKPDF is no longer maintained. When I try to install it, I get the error: ERROR: Could not find a valid gem 'wkpdf' (>= 0) in any repository I am preferably looking for a solution using wkhtmlpdf, since the rendering of the PDFs should remain exactly the same (except for the fonts ofcourse). – Gabionade

hmm.. have a look around on the net, I'm sure you'll be able to find it somewhere. Sorry about your tribulations though, I hope this answer was at least helpful as you can try a different utility, or LaTeX. -remember to mark/vote answers accordingly, thanks – Mm

I would try another library if it was comparable to wkhtmltopdf's abilities. There's a lot of content processing done by wkhtmltopdf which another library should be able to adopt, I'm afraid most libraries will render the pages differently. Thanks for your time though! – Gabionade

Answer 3

Why not change lib ?

I used wkhtmltopdf but I found the inner peace with TCPDF

I printed an HTML page doing this

// set font
$pdf->SetFont('itclegacysansltmedium', '', 12);
// add a page
$pdf->AddPage();

// set some text to print
ob_start();
include('view.php');
$html = ob_get_clean();
$pdf->writeHTML($html, true, false, true, false, '');

Quotient

Answer 4

I arrived here searching for "wkhtmltopdf font collisions".

FontForge wouldn't work for me. Instead I installed the command line tool ttx (via brew install fonttools on OS X).

Then:

• ttx /path/to/font.otf, this outputs /path/to/font.ttx
• Open /path/to/font.ttx using a text editor
• Set a unique value for name elements that contain the common font name. e.g.

  # original:
  <namerecord nameID="1" platformID="1"...>Arial</namerecord>
  # updated: 
  <namerecord nameID="1" platformID="1"...>Arial Bold</namerecord>
  

• Save the file
• ttx /path/to/font.ttx, this outputs /path/to/font#1.otf
• Use /path/to/font#1.otf in place of /path/to/font.otf

Trickery