1

I've using printJS and jQuery together to print the contents of an HTML div.

The div contains text which is rendered with the 'Annie get your telescope' google font.

When I print, the text is printed using a more standard Web Font rather than the Google Font. If I download the font and host it locally, I get no text at all.

How do I print HTML via printJS and get text in a Google font to render correctly?

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
DaveH
  • 7,187
  • 5
  • 32
  • 53

1 Answers1

2

Make sure to pass the desired font to printJS. If you are not passing your stylesheet using the css property, you can just pass the font through the style property.

Another thing, currently, print.js is setting a default font for printing, which has been deprecated and will be removed on its next major version (v2). For now, you will also have to pass the font family with the font property.

printJS({
  printable: "print-element",
  type: "html",
  style: `@import url('https://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope');`,
  font: 'Annie Use Your Telescope'
})

Here is a fiddle with the above example: https://jsfiddle.net/crabbly/Lt2nvagc/

crabbly
  • 5,106
  • 1
  • 23
  • 46
  • Currently I am passing a stylesheet in the css property - can you explain how I also pass the style if I use a css? ( I'm a bit clueless in css etc ) – DaveH Dec 10 '18 at 11:24
  • Passing the stylesheet using the `css` property is preferred. However, in certain situations where you don't have the desired print style available in you stylesheet, you can choose to just pass it using the style property. Its just an extra option. – crabbly Dec 11 '18 at 02:26