Support using kits and CDN for fonts?
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
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.
Are you able to replicate the problem in the playground?
Yes and no.
I was able to add the fonts to the invoice fork:
but when I created my own initial report not even the CDN works.. can see that here:
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?
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
Humm.. sorry not sure I am following.. that setting is not on in the invoice example.. and it sill loads the fonts
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?
Here it's working.
This is the wrong link declaration, it should be in the
head, not inside the
<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>