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

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.

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/

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, '');

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