Print.js: Can't use Google imported fonts

Created on 28 Mar 2018  路  7Comments  路  Source: crabbly/Print.js

I'm using the latest version of printJS and trying to use a font imported from Google but printJS is ignoring it and printing in Times New Roman instead. I include the font with this line and it works for display on screen so I know it's being imported.

<link href="https://fonts.googleapis.com/css?family=Cambo" rel="stylesheet">

I've tried both lines of code below to do the print but neither one uses the imported font.

printJS({ printable: 'BookingReport', type:'html', targetStyle: ['font-family: Cambo'], maxWidth: 800});
printJS({ printable: 'BookingReport', type:'html', font: 'Cambo', maxWidth: 800});

Is this something that's not supported? If so, can it be added? Thanks.

enhancement

Most helpful comment

The library has now a css parameter that can be used when printing html elements. If you are still having any issues with fonts, you can use that to import external fonts when printing html.
http://printjs.crabbly.com/#configuration

All 7 comments

@galcott Yea, the font parameter tells the lib to use Cambo. However, because it is an imported font, it is not available in the iframe where the lib prints the processed html from. I'll play with this and implement a better solution to handle attached css and fonts.

Somehow this is working now, and I haven't installed a new version. ????

@galcott Is this still working? Same Cambo font?

The library has now a css parameter that can be used when printing html elements. If you are still having any issues with fonts, you can use that to import external fonts when printing html.
http://printjs.crabbly.com/#configuration

It's not clear to me how this works. If I create a CSS file for printing, what class name or ID do I use for the style?

Whatever class name you have assigned in your html element.

Also, you don't need to create a new file, if you already have an existing stylesheet, you can just pass the url for that file.

I had the issue I just imported the font used in the CSS file imported in JS :

@font-face {
    font-family: 'josefin_sansregular';
    src: url('../fonts/josefinsans-regular-webfont.woff2') format('woff2'),
         url('../fonts/josefinsans-regular-webfont.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
#tickets_list{
    font-family:"josefin_sansregular";
}

JS used

  printJS({ printable: 'tickets_list',
         type: 'html',
         css: '/static/css/styles_tickets.css'});
Was this page helpful?
0 / 5 - 0 ratings

Related issues

Orcinuss picture Orcinuss  路  8Comments

JahsonKim picture JahsonKim  路  5Comments

vshmoylov picture vshmoylov  路  5Comments

Kreativschnittstelle picture Kreativschnittstelle  路  8Comments

raymond8080 picture raymond8080  路  4Comments