question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't use Google imported fonts

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
ketimaBUcommented, Sep 25, 2018

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'});
2reactions
crabblycommented, May 17, 2018

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Google Font Not Working With CSS? [duplicate] - Stack Overflow
Try to put your import on the top of your file, before any declaration.
Read more >
import Google Font not working within css files
I am trying to add a different font to the css stylesheets attached to the website I'm designing and I can't seem to...
Read more >
Why this @import link from Google Fonts not working ... - Quora
Here's why: Italics are harder to read, and should only be reserved for emphasis. People will leave when they can't read your site....
Read more >
Google Fonts not working - The freeCodeCamp Forum
Hey guys. Trying to import some Google Fonts but they're not rendering on Chrome. Was using Codepen and it worked fine, but now...
Read more >
How to Use Google Fonts and Custom Fonts in Jotform
Importing Google Fonts into Your Form · Open the Form Designer panel in Form Builder. · Go to the Styles tab. · Paste...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found