Critical CSS and $global-url path

[mercs600]

Summary
In OroCommerce 6.1, Critical CSS generation incorrectly resolves the $global-url variable, breaking font paths when using the official method for setting custom static fonts.

Steps to reproduce

1. Follow the official guide to configure custom fonts using $theme-custom-fonts and $global-url:
   https://doc.oroinc.com/frontend/storefront/how-to/how-to-change-fonts/
2. Add static font files under the custom theme and configure the map accordingly.
3. Build assets.
4. Inspect both regular CSS and Critical CSS outputs.

Actual Result

In regular CSS:
Font paths are generated correctly, e.g.
build/_static/bundles/customtheme/ThemeBundle/fonts/

In Critical CSS:
Font paths are incorrect, e.g.
_static/bundles/customtheme/ThemeBundle/fonts/
(missing build/ prefix, resulting in 404 errors)

What I tried:
Attempted to override $global-url specifically for Critical CSS context – no effect.

Expected Result
Font paths should be consistent and valid in both regular CSS and Critical CSS. The $global-url should resolve correctly in both contexts, especially since it’s used per official recommendations.

Additionally this change breaks the styleguide (https://doc.oroinc.com/frontend/storefront-style-guide/#download-figma-design-files) when it comes to default font. oroinc/platform@9ac1848#diff-b568627b1737580ca94f40965d8b945e354225f418ac041d9503fa39b1e4c8a3R12

Details about your environment

• OroCommerce version: 6.1
• PHP version: 8.4
• Database (MySQL, PostgreSQL) version: postgres 17

[ValeriyYustunyk]

Hi,

Actually, I had not expected that someone would need to use $global-url inside Critical CSS.
Thank you for reporting this issue.

To preload fonts more efficiently, we recommend using the preload_web_link block.
The official documentation preload-critical-assets and an example is already available for the upcoming v7.0
default/theme.yml

[mbessolov]

Internal issue ID: BB-26086

[mercs600]

Hi,

Actually, I had not expected that someone would need to use $global-url inside Critical CSS. Thank you for reporting this issue.

To preload fonts more efficiently, we recommend using the preload_web_link block. The official documentation preload-critical-assets and an example is already available for the upcoming v7.0 default/theme.yml

Hi,

I understand and agree with the approach of preloading fonts — it absolutely makes sense from a performance standpoint.
However, it doesn’t help much when we want to use your default SCSS mixins, like get-font-name(), because they rely on the $theme-fonts map being defined.

In general, I didn’t intend to load fonts inside Critical CSS.

But in practice, I noticed that when basic styles like body {} are loaded via Critical CSS, my custom font is not recognized, and the browser falls back to your default “Jakarta Plus” font — simply because the Critical CSS context doesn’t know about my font.

That’s why I tried to override the body font using:

$base-font: get-font-name('main');

But to make this work, $theme-fonts needs to be defined — and defining it requires pointing to font files, which I wanted to load statically (not via Google Fonts API).
So this creates a circular dependency.

On the other hand, in the context of Critical CSS, it would be more efficient to define the font-family directly in the HTML (e.g. inline or server-rendered) rather than relying on a separate CSS file just to load fonts.

Also, I have an additional question regarding the style guide.
We’re currently using your official Figma style guide, which is still marked as version 6.0.
However, in OroCommerce 6.1 you’ve introduced “Jakarta” as the new default font.
Will an updated version of the style guide be made available to reflect that change?

Thanks again for your quick response and for looking into this issue — I really appreciate it 💙

[mbessolov]

Hi @mercs600 ,

Yes, the Figma files for version 6.1, which use the "Golden Carbon" theme, will be published soon on the documentation website.

If you need them sooner, please open a ticket in the Partner Support Portal at https://oro-inc.atlassian.net/servicedesk/customer/portal/3/group/7/create/9 and we can share them with you right away.

Thank you,
Michael