magento2: CSS load order incorrect using default_head_blocks.xml

It looks like Magento separates the assets into ‘groups’ before rendering them into the page like, css, scripts, link, etc. You can order the assets within each group using @chicgeek’s technique or the extension mentioned above but it doesn’t seem like it’s possible to load one group before another so if you want to load some google fonts before everything else you’ll need to rewrite this functionality.

In my case I ended up copying the @font-face declarations from the google fonts spreadsheet to load it locally instead of using google’s CDN. Then copied the styles-m.less stylesheet into my theme and added a @import 'source/_google-fonts.less'; statement before everything else.

Still not fixed in magento 2.3.5 ? Please reopen the issue.

This is not fixed.

And I’m developing a site on Magento 2.3.4.

Hey @maksek,

Yes, definitely a ‘workaround’.

If you add an attribute to the internal CSS, it will force it to parse this command after other CSS links. This attribute doesn’t itself do anything. I named the attribute as follows, but it could be anything:

<css src="https://example.com/cdn.css" src_type="url" />
<css src="css/local.css" load_last="true" />

I can confirm that this workaround does fix the issue however, thanks @chicgeek 👍

@Eddcapone Did you try the workaround? (Note: I’ve not tried this recently.)

The workaround shows how to load a script last, but I need my bootstrap script loaded before style-m.css and style-l.css. Otherwise it will override some stuff, e.g. it changes the color of a tag to blue.

is not working as expected. please fix it <css src="css/bootstrap.min.css" order="1" />

@BenSpace48 Looking at the committed changes it looks like all the nodes are ordered and then outputted so it should affect all types.

#distributed-cd

Is this still an issue? I’m wondering how I can make sure some external fonts get loaded before the regular style-m.css and style-l.css files.

Hey @maksek,

Yes, definitely a ‘workaround’.

If you add an attribute to the internal CSS, it will force it to parse this command after other CSS links. This attribute doesn’t itself do anything. I named the attribute as follows, but it could be anything:

<css src="https://example.com/cdn.css" src_type="url" />
<css src="css/local.css" load_last="true" />