Google Web Fonts and PDF generation from HTML with wkhtmltopdf

I had this same problem and solved it by downloading the fonts and running it off of a local file in my web server with this font-face declaration:

@font-face {
    font-family: 'PT Sans';
    src: url( '/public/inc/fonts/PTS55F-webfont.eot');
    src: url( '/public/inc/fonts/PTS55F-webfont.eot?#iefix') format('embedded-opentype'),
         url( '/public/inc/fonts/PTS55F-webfont.woff') format('woff'),
         url( '/public/inc/fonts/PTS55F-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

I was able to find this font on Font Squirrel, but your mileage may vary.

I think what happens with the fonts off of Google is that it's trying to load only the format that it thinks this browser wants, which for WebKit is woff (I believe). But wkhtmltopdf can't embed a woff font in a PDF, and so defaults back to sans-serif. By declaring all of them, the TrueType font is included, which is what the PDF actually uses.

Also, you need to define the font you want used as the first one in any font-family CSS definition or wkhtmltopdf will just ignore it.

A simple solution: Base64-encode your font and embed it in the CSS:

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

FontSquirrel can do this for you through the advanced options of their Webfont Generator; Google and other fonts can be encoded with this tool.

I've used this solution with pdfkit and wicked_pdf, which work through wkhtmltopdf, so I presume this should work with the native wkhtmltopdf as well.

To convert HTML to PDF by wkhtmltopdf try to avoid woff font face. Use the truetype format of the Google Web Fonts with base64 encode.

Recently I tried to use a Google web font from Google Web Fonts. In the browser it shows correctly but it doesn't show after converting HTML to PDF.

After searching the web extensively, at last, I found tools to encode fonts to the base64 format and also got CSS for @font-face.

Read the solution here.