Google Web Fonts and PDF Generation from HTML with Wkhtmltopdf

Google Web Fonts and PDF generation from HTML with wkhtmltopdf

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.

use custom fonts with wkhtmltopdf

Since it is a Google Web font you need not to write @font-face in you style sheet just use following link tag in your source code:

<link href='http://fonts.googleapis.com/css?family=Jolly+Lodger' rel='stylesheet' type='text/css'>

and

 <style type = "text/css">
    p { font-family: 'Jolly Lodger', cursive; }
</style>

will work.

By the way, in your code you are defining @font-face family as font-family: Jolly; and using it as p { font-family: 'Jolly Lodger', cursive; } that is wrong, because it's mismatching font-family name.

Custom fonts not working in Generated PDF using WKHTMLTOPDF Library

There are multiple solutions to accomplish this:

1) If you use google font, try below:
Use <link> to include google font

<link href='http://fonts.googleapis.com/css?family=YOURFONTFAMILY' rel='stylesheet' type='text/css'>

Use <style> to apply font effect

<style type = "text/css">
    p { font-family: 'YOURFONTFAMILY'; }
</style>

2) Encode font with Base64 encode tool and use it in css

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

Hope one of the above is your solution!

Taken ref: use custom fonts with wkhtmltopdf, helvetica font not working in wkhtmltopdf

Java ,wkhtmltopdf, HTML to PDF not all fonts works correctly

I have been solve this issue. The problem was with fonts, not with wkhtmltopdf lib.
If you want to use font-property correct, you need to be sure that 'Preferred Family' is set in your font. To check or to set this you can with FontForge app.
Open FontForge, then import your font, and click 'Element/FontInfo/TTF Names', and change 'Preferred Family' (it's need to be unique for each font).

pdfkit with google web fonts

We just had the same problem with wicked_pdf, which uses wkhtmltopdf, too. Our solution was to download the font and install them on the machines, which generate the pdfs. Then use the fonts like every other system font.

---

Related Topics