Google Fonts not save in image

[ezramod]

Hy, i use his script for save div to image, but font family is not apply to jpg/png, have solution to fix this?

my script work here: http://cani.magazin-jucariionline.ro/

[GuiRitter]

Same here, I get

Error while reading CSS rules from https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese SecurityError: Failed to read the 'cssRules' property from 'CSSStyleSheet': Cannot access rules

I have a React web app and I'm loading Google's font like this:

import React, { Component } from 'react';

// ...

class C extends Component {

    // ...

    componentDidMount() {
        const fontLink = document.createElement('link');

        fontLink.href = 'https://fonts.googleapis.com/css?family=Open+Sans:300,400,700&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese';

        fontLink.rel = 'stylesheet';
        fontLink.type = 'text/css';

        document.body.appendChild(fontLink);

    }

    // ...

}

// ...

~~Other than that, awesome work!~~

~~Scratch that, I just realized that this doesn't generate a real SVG. If saved to a file and opened in a browser, it shows ok but, if opened in InkScape or GIMP, it's empty. Actually, GIMP managed to find an actual SVG that was in the middle of the DOM that I converted, but nothing of the other divs.~~

Scratch that, after much digging, I just realized that this does generate a real SVG, but not all SVG renderers are also HTML renderers, such as InkScape. I'd rather have a pure SVG, so I'll keep looking.

[ezramod]

i add crossorigin="anonymous" to stylesheet and now is saved

[forthekill]

I tried adding crossorigin="anonymous", and while it doesn't generate any console errors, it does not grab my stylesheets.

[Abdullilah]

@ezramod Do you have any idea if it's possible to add this to an Angular 2+ app, if yes could you please help me with it?

[joshmg-77]

well!!! for me it works like this!!!

example

<link rel="preconnect" crossorigin="anonymous" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet" crossorigin="anonymous">

thanks ezramod for crossorigin="anonymous"

[ghost]

well!!! for me it works like this!!!

example

<link rel="preconnect" crossorigin="anonymous" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet" crossorigin="anonymous">

thanks ezramod for crossorigin="anonymous"

That fixed the issue for me too, thanks!