printjs

Printing Google Fonts using printJS

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?

Solution

  • 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/