Fonts on Heroku using wicked_pdf/wkhtmltopdf

Question

I'm using wicked_pdf to generate a PDF from HTML and deploying to Heroku.

This is all working fine when deployed and I have experimented with different fonts using @font-face but so far the best results are produced when I just use "serif" as the font.

My assumption is that wkhtmltopdf is using a built-in font on the Heroku server to render "serif". Although this looks good on the PDF, the browser on various operating systems renders different fonts for "serif" - so I'd like to try and find matching fonts for the HTML.

Is it possible to 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 through CSS to get consistent font rendering across different systems and browsers. There are 2 ways I can think of doing this:

One is to specify a CSS font style, with 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 show up in all modern browsers, defaulting to serif on Heroku, and devices with older/simpler web browsers. The downside is that the fonts will look one way in a browser, but different in your PDF, since Heroku will use its default serif font.

The second way is to Base64-encode the 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...
}

This will also work in all modern browsers, with an extra 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 across your development environment and Heroku, since you don't have to git-push fonts and mess with local/absolute paths in CSS.