Support using kits and CDN for fonts?

[rchancey]

I am trying to use a purchased set of font awesome.. the normal CDN link works fine and when I use a <script> tag for the kit it works fine.. but passing that to jsreprot does not render the fonts. Just get squares.

Here is the kit stuff from fontawesome.. its supported by CDN
https://fontawesome.com/docs/web/setup/use-kit

Is there a way to use this with JS report?

This does work with normal HTML but again when I pass that HTML to jsreprot.. it does not render the fonts.

here is my kit: <script src="https://kit.fontawesome.com/3a57f86f87.js" crossorigin="anonymous"></script>

Any insight would be appreciated.

[jan_blaha]

Are you able to replicate the problem in the playground?
https://playground.jsreport.net/

[rchancey]

Yes and no.
I was able to add the fonts to the invoice fork:
https://playground.jsreport.net/w/rchancey/uq1rZNy4

but when I created my own initial report not even the CDN works.. can see that here:
https://playground.jsreport.net/w/rchancey/QN0Hsolm

that's very odd because it works fine in your invoice example.. must be some config missing from the blank start?

You can see in the screen shot the fonts show fine with the normal CDN:

but if I use the kit.. nothing:

Also if you paste the script URL into your browser the js css will show up.. its fully open and accessible. So somehow js report must not like the JS file?

[jan_blaha]

It's because the fonts are asynchronously loaded.
You can either use option wait for network iddle

Or use some fontawesome kit event, to trigger the printing with trigger
https://jsreport.net/learn/chrome-pdf#printing-triggers

[rchancey]

Humm.. sorry not sure I am following.. that setting is not on in the invoice example.. and it sill loads the fonts
https://playground.jsreport.net/w/rchancey/QN0Hsolm

I set that setting and still no fonts in the vanilla project I made. .. just the normal css not even the js.
Something else preventing it from loading the css external in the bare bones project?

I am not really following.. how do I know when to set the window.JSREPORT_READY_TO_START=true? I have no idea when the js has loaded for the styles from the kit.. sorry if I missed something?

[jan_blaha]

Here it's working.
https://playground.jsreport.net/w/anon/INc9rAy~

This is the wrong link declaration, it should be in the head, not inside the style.

<style>
         <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.css"
        crossorigin="anonymous" referrerpolicy="no-referrer" />
        </style>