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 workable.

Tried Solution 1

I found similar thing here : Font issue

Tried the last solution mentioned over there

workaround is to define @font-face in your css and have src link to external host that is accessible by wkhtmltopdf

But the solution is not working.

Tried Solution 2 I also tried to use google font api, but result is still not workable. helvetica font

here is an example Example of custom font

Tried Solution 3 I tried doing it using css property @page. But that also is not working.

What is the approach for a workable solution.

Defining `@font-face` and linking to an external host should work as well. It's not enough to declare `@font-face` though, I suspect your stylesheet doesn't actually use the font in any HTML elements. After linking to an external host, or encoding the font into the stylesheet, try setting your CSS to actually use the font on some HTML tag: `body { font-family: 'Helvetica'; }`. — Arman H, Aug 05 '13 at 18:33

Arman H · Accepted Answer · 2014-09-04T18:22:43.757

36

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.

edited Sep 04 '14 at 18:22

answered Jul 14 '13 at 18:57

Arman H

5,488
10
51
76

3

yes i think its the same solution as given in here.http://stackoverflow.com/questions/6721295/google-web-fonts-and-pdf-generation-from-html-with-wkhtmltopdf/16204485#16204485. How ever the generated dosent seem to show helvetica font – Padmalochan Aug 05 '13 at 09:37
I've had no problem with that approach. Are you declaring the right element to use the font-face? E.g. `h1 { font-family: 'Helvetica'; }` – Arman H Aug 05 '13 at 17:50
1

Yes did the same but still the font type shown in generated pdf is arial – Padmalochan Aug 05 '13 at 18:51
You're doing something wrong somewhere. This method is fairly foolproof, and worked for me locally on Macs and in production on different Linux servers. Can you show your code, the base HTML and CSS? – Arman H Aug 05 '13 at 19:25
This is working for me via the Mac build of wkhtml 10 rc2 but *not* on CentOS. Same code, different PDFs. Narrowed it down to a single HTML file.. nothing complicated. – Chords Jan 03 '14 at 16:09
@Chords this solution seems to be working in windows as well. – Padmalochan Jan 06 '14 at 04:10
The link provided in the answer appears to be a spam site now? – Jared Eitnier Sep 04 '14 at 03:12
2

@JaredEitnier, the old link has gone offline. [Try this website](http://www.opinionatedgeek.com/dotnet/tools/base64encode/) instead, it does the same thing. – Arman H Sep 04 '14 at 18:22
3

Thanks mate!, if anyone is interested I used this base64: https://github.com/alixaxel/typhon/blob/master/typeface/sans-serif/Helvetica%20Neue.base64 – Benjamin Vison Aug 23 '17 at 16:31
Hot damn! Worked a treat to ensure our Production and Staging servers were generating beautiful PDFs using Helvetica Neue. Thank you! – Joshua Pinter Mar 22 '18 at 18:41
1

You can use this tool to generate all the base64 encoded font file from google fonts stylesheets url. https://amio.github.io/embedded-google-fonts/ – anil90 Sep 22 '20 at 11:53
Hello, I'm wondering. I've encoded my font and it doesn't work for me. Is this the truetype I should keep? And should I put the whole url to access the font when encoding or just something like (/fonts/my_font)? – LucasLaurens Dec 24 '21 at 10:44
1

@LucasLaurens with this solution, you do not use a URL or a relative path to the font file itself. Instead, you first base64-encode the file, then paste the encoded font data directly into the CSS stylesheet in the `src` property, as shown in the example. – Arman H Jan 03 '22 at 19:31
I've already done. I've encoded the file with the path but it didn't work. – LucasLaurens Jan 04 '22 at 20:14

score 13 · Answer 2 · answered Oct 13 '14 at 09:42

13

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
....

answered Oct 13 '14 at 09:42

baxang

3,627
1
29
27

We use a similar method using wkhtmltopdf for production workloads. Fonts installed on our servers works well for us. – theandywaite Jun 14 '16 at 10:06
thanks for suggesting `fc-list`. It was enough to find the available fonts in my server :) – igorsantos07 Oct 06 '16 at 20:37
1

This should be the accepted solutions, `base64`-ing of fonts is a bit of a hack. It should also be understood wkhtmltopdf is using fonts that are on the server, so like you would add a font you're missing in Word to your PC or Mac, you add the font to the server. If you're looking to install MS fonts system wide, see this: https://unix.stackexchange.com/questions/217365/how-to-install-microsoft-true-type-fonts-for-centos-7 – kasimir Aug 30 '17 at 15:59
This solution is worked also for me (CentOs 7 linux), **but with one modification** : it seems that the "Family Name" property inside the TTF file is the problem maker. becuase linux matched the Family Name so if all the fonts have the same family name (Heebo). So I edited the TTF files and changed the family name to "Hebbo-Light" (using the "Font-Forge" software , in "Element" menu > "Font-Info" screen - I edited the "Family" propery" to be with dash , exactly like in the css) and then re-installed the fonts on the linux - and it works! – user1598814 Sep 12 '18 at 06:45

CodeClown42 · Answer 3 · 2015-03-30T21:39:40.457

4

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.

edited Mar 30 '15 at 21:39

answered Mar 30 '15 at 21:34

CodeClown42

11,194
1
32
67

score 1 · Answer 4 · answered Apr 23 '15 at 17:18

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.

score 1 · Answer 5 · answered Nov 16 '15 at 17:25

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

Download PT Sans from google and runt it through fontsquirrel generator
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

score 0 · Answer 6 · edited Nov 06 '14 at 09:45

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.

helvetica font not working in wkhtmltopdf

6 Answers6

Linked