Heroku fonts with wicked_pdf / wkhtmltopdf

Question

I use wicked_pdf to create a PDF file from HTML and deploy to Heroku.

All this works fine when deployed, and I experimented with different fonts using @ font-face, but so far the best results appear when I just use “serif” as the font.

My guess is that wkhtmltopdf uses an embedded font on the Heroku server to render "serif". Although this is clearly visible in PDF, the browser on different operating systems provides different fonts for "serif" - so I would like to try to find the appropriate fonts for HTML.

Can I find out which fonts are installed on the Heroku server and which one maps to "serif"?

Answer 1

You can explicitly set the font you want using CSS to get consistent display of fonts across different systems and browsers. I can think of it in two ways:

One of them is to specify the CSS font style, with the default fallback font being serif . For example, to add the Droid Serif font from Google Fonts and use it as the main body font style:

 <link href='http://fonts.googleapis.com/css?family=Droid+Serif' rel='stylesheet' type='text/css'> <style> body { font-family: 'Droid Serif', serif; } </style> 

Droid Serif will appear in all modern browsers, by default on serif on Heroku, as well as devices with older / simpler web browsers. The downside is that the fonts will look in the browser in one direction, but different in your PDF format, since Heroku will use the default serif font.

The second way is to encode the Base64 font ( you can use this tool ) and include it in your CSS:

 @font-face { font-family: 'OpenSans'; src: url(data:font/truetype;charset=utf-8;base64,AAEAAAATAQA... } 

It will also work in all modern browsers, with the added bonus of also working on Heroku to give you consistent font rendering. This method is especially convenient because you get consistency not only in browsers, but also in your development environment and Heroku, since you do not need git-push fonts and mess with local / absolute paths in CSS.