I have a project where I’m using wkhtmltopdf from a Node.js AWS Lambda function to generate a PDF from HTML. The core browser engine wkhtmltopdf is Qt WebKit — an old version that does not support all new font formats. I had a font that just would not render into the PDF. I think it was some of the characters in the Unicode section of the font definition that were causing a problem.
After writing this, I finally got sane and upgraded to puppeteer for PDF generation. Here are the steps I uncovered to make my font compatible with older browsers.
1. Load font into http://www.glyphrstudio.com/ – a free online (no account necessary) editor. Only import Latin characters. I think I loaded the TTF version of the font
2. Go into font settings. Keep the “Standard Glyph Ranges” (latin characters).
3. Put bogus entries in all the meta data (copyright) fields in order to allow export.
4. Export to OTF.
5. Convert OTF to TTF at https://convertio.co/otf-ttf/
6. Base 64 encode using the command line openssl base64 -A -in MyFont-1.ttf -out MyFont-1.ttf.base64
7. Use CSS syntax below (paste base64 text at end) in your CSS.
@font-face {
font-family: DataFont;
src: url(data:font/truetype;charset=utf-8;base64,AAEAAAANAIAA...2J9uIA==) format(“truetype”);
}
8. Download your HTML wget https://localhost:3000/api/0.1/packing-slips/856157716550.html --no-check-certificate
9. Convert HTML to pdf wkhtmltopdf 856157716550.html output.pdf
… and that’s it 😉.