helvetica font not working in wkhtmltopdf

Question

I have been trying to use Helvetica font while creating the pdf but the font is not reflected back in pdf.

I did some google and found some solutions but none are wo

Answer 1

The easiest way to fix wkhtmltopdf's font problems is to Base64 encode the font (you can use this tool) and include it in your CSS:

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

This works with all fonts (including Google Fonts), and guarantees cross-platform compatibility across different machines and operating systems.

Answer 2

expanding baxangs answer for linux (x64) users: you install the ttf font file in /usr/share/fonts/font-folder/font-name

and then in your css file use the fontname which is listed in fc-list, you don't need to use @font-face, just use the fontname in your css

example Verdana.ttf======

copy from local machine to server into /usr/share/fonts/Verdana/Verdana.ttf

fc-list to get the fontname (most likely it'll be Verdana)

Then use in your css P{ font-family: 'Verdana'}

and that's it! took me a while to get it fixed.

Answer 3

To add to the fray, using wkhtmltopdf 0.12.1 (with patched qt) on linux this worked for me:

@font-face {
    font-family: dejaSansMono;
    src: url('file:///usr/share/fonts/dejavu/DejaVuSansMono.ttf');
} 

I.e., specifying the path to the .ttf. Simply naming a font-family, any font-family, did not work even if it did in the browser.

Answer 4

I had the same problem with PT Sans from google. What worked for me was the following process:

1. Download PT Sans from google and runt it through fontsquirrel generator
2. Place the @font-face (I only used the ttf) in the css (in my case was in html head of a php file)

Note that I did not use base64 and it worked as expected.

Hope it helps

Answer 5

For me loading fonts from Google Fonts didn't work. And putting base64ed binary into a CSS file seems a little to much for me(Korean types are several megabytes). I'd recommend to install the fonts you need to use on the machine. For Ubuntu you can simply download fonts files from Google Fonts and copy the files in to $HOME/.fonts directory and run fc-cache command in command line to rebuild the fonts list.

$ mkdir ~/.fonts
$ copy your-font-file.ttf ~/.fonts/
$ fc-cache -fv

For a Rails application you can symlink

$ ln -s /your/app/root/assets/fonts ~/.fonts

Then you will be able to list all available fonts.

$ fc-list
Nimbus Sans L:style=Regular Italic
URW Palladio L:style=Roman
Century Schoolbook L:style=Bold Italic
Nimbus Sans L:style=Bold
URW Chancery L:style=Medium Italic
Nimbus Roman No9 L:style=Regular
Century Schoolbook L:style=Bold
Century Schoolbook L:style=Italic
Nimbus Sans L:style=Regular
....

Answer 6

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

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

Then after searching lots of from web at last I found tools to encode fonts to base64 encoded format and also got CSS for @font-face.