Uncaught (in promise) TypeError: u.style.fontFamily is undefined

[Overbord]

Not sure what's happening, here's the code I'm using:

    jQuery('#download').click(function() {
        jQuery('#socialcanvas').removeClass('canvas-zoom-out');
        modernScreenshot.domToJpeg(document.getElementById('socialcanvas'), { quality: 1, width:canvWidth, height:canvHeight })
        .then(dataUrl => {
        var link = document.createElement('a');
        link.download = shapetrimmed + ' - ' + fileTitle + '.jpeg';
        link.href = dataUrl;
        link.click();
        jQuery('#socialcanvas').addClass('canvas-zoom-out');
        });
    });

I get this: [modern-screenshot] Error while reading CSS rules from https://fonts.googleapis.com/css?family=Roboto%3A100%2C100it…c%2C800%2C800italic%2C900%2C900italic&display=auto&ver=6.1.1 DOMException: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet modern-screenshot:1:3035

And this:

Uncaught (in promise) TypeError: u.style.fontFamily is undefined
    It https://unpkg.com/modern-screenshot:7
    It https://unpkg.com/modern-screenshot:7
    q https://unpkg.com/modern-screenshot:1
    promise callback*L https://unpkg.com/modern-screenshot:1
    g https://unpkg.com/modern-screenshot:1
    g https://unpkg.com/modern-screenshot:1
    It https://unpkg.com/modern-screenshot:6
    Ae https://unpkg.com/modern-screenshot:9
    q https://unpkg.com/modern-screenshot:1
    promise callback*L https://unpkg.com/modern-screenshot:1
    q https://unpkg.com/modern-screenshot:1
    promise callback*L https://unpkg.com/modern-screenshot:1
    g https://unpkg.com/modern-screenshot:1
    g https://unpkg.com/modern-screenshot:1
    Ae https://unpkg.com/modern-screenshot:9
    z https://unpkg.com/modern-screenshot:9
    q https://unpkg.com/modern-screenshot:1
    promise callback*L https://unpkg.com/modern-screenshot:1
    g https://unpkg.com/modern-screenshot:1
    g https://unpkg.com/modern-screenshot:1
    z https://unpkg.com/modern-screenshot:9
    _ https://unpkg.com/modern-screenshot:9
    q https://unpkg.com/modern-screenshot:1
    promise callback*L https://unpkg.com/modern-screenshot:1
    g https://unpkg.com/modern-screenshot:1
    g https://unpkg.com/modern-screenshot:1
    _ https://unpkg.com/modern-screenshot:9
    Bt https://unpkg.com/modern-screenshot:9
    q https://unpkg.com/modern-screenshot:1
    promise callback*L https://unpkg.com/modern-screenshot:1
    g https://unpkg.com/modern-screenshot:1
    g https://unpkg.com/modern-screenshot:1
    Bt https://unpkg.com/modern-screenshot:9
    <anonymous> https://DOMAIN/sandbox/wp-content/themes/nel-sandbox/js/socialtool.js?ver=6.1.1:372
    jQuery 10
    <anonymous> https://DOMAIN/sandbox/wp-content/themes/nel-sandbox/js/socialtool.js?ver=6.1.1:370
    jQuery 13
modern-screenshot:7:711

[Overbord]

Fixed but now the font on the page is not rendering in the generated image

[qq15725]

Can you provide a reproducible code snippet 👀

[Overbord]

Try it out here: https://dev.overbord.no/sandbox/social/

[qq15725]

Seems to fix

[Overbord]

Seems to be a Firefox problem, it works with Chrome

[qq15725]

Is Firefox abnormal? I don't see anything unusual

[Overbord]

It's still not loading the font for me in Firefox:

[Dineshs91]

I have the same issue. It happens only with Firefox. The downloaded image, doesn't have the font applied.

[Overbord]

Agreed, the font doesn't display in normal or dev Firefox.