Fonts inside CSS file have a bad path generated

[Creativico]

Description:
So this problem occurs when I have a CSS file with following url for fonts:
@font-face{ .... font-family:eicons;src:url('https://mycdnapi/m:0/a:https://www.mysite.com/wp-content/plugins/elementor/assets/lib/eicons/fonts/eicons.eot?5.14.0 .... )

Critical CSS translates that url() to
https://www.mysite.com/fonts/eicons.woff2?5.14.0

It also occurs with any other font URL in the CSS file.

I run this code for generating critical:
Crittr({ urls: [url], device: { scaleFactor: 2, width: 3050, height: 2000, }, pageLoadTimeout: 5000 }) .then(({critical, rest}) => { fs.writeFileSync(output, critical, 'utf-8'); }) .catch(err => { console.error(err); });

The problem is when the font url is bad, gtmetrix speed test has 302 redirects because of the bad url.
https://jmp.sh/eiSaPh0

[Creativico]

@hummal Sorry, I have just verified that elementor sometimes uses absolute path, sometimes relative path to fonts and in cases when it's relative then critical CSS fails. With absolute path works perfect in all conditions.

Also, thanks for your great work! :)

[philipp-winterle]

Thank you for reaching me out!

So does this mean this is not a crittr issue?

As far as I understand this still happens if you have relative font urls?

Can you give a specific example to help me understand better?

[Creativico]

@hummal So I believe this is a crittr issue because for example the file locations is:
www.whatever.com/wp-content/plugins/elementor/assets/lib/eicons/css/elementor-icons.min.css?ver=5.14.0
And it's has contents as relative url to font
@font-face{font-family:eicons;src:url(../fonts/eicons.eot?5.14.0);src:url(../fonts/eicons.eot?5.14.0#iefix) format("embedded-opentype")

Example:
https://jmp.sh/PuaXMbM

So once that is parsed into critical css and inserted into the page as inline critical css the path stays relative
url(../fonts/eicons.eot?5.14.0);

and in that case it translates in browser into bad url
www.whatever.com/fonts/eicons.eot?5.14.0

While the correct url would be
www.whatever.com/wp-content/plugins/elementor/assets/lib/eicons/fonts/eicons.eot?5.14.0

So in this case if you have any relative url it will not work unless the css file and fonts are in root of the site.

[philipp-winterle]

I guess there is a misunderstanding in how crittr is working. It only parses the outout on the website. If the css contains already the right paths it only uses these paths and put them into the critical css. There is no changing of paths because if the original css already contains the wrong paths crittr is not responsible for fixing those paths.