CSS load order incorrect using default_head_blocks.xml

[chicgeek]

For my theme I am loading in two stylesheets: one from a CDN (cdn.css) and one from my theme (local.css). They should be loaded in this order in the DOM but it does not preserve the order indicated by the XML.

This is what I have in default_head_blocks.xml in the correct order:

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

But in the DOM it does not load in this order: local.css is loaded in first and cdn.css second.

I believe this to be a bug - am I missing additional configuration to set load order for these assets?

I did not find information specific to load order in the documentation. I know in M1 the order specified in the XML would be preserved in the DOM.

[slavvka]

Thank you. This issue has been reported as MAGETWO-42659 internal issue.

[maksek]

Hi @chicgeek, did you find answer or workaround on the issue you reported?

[chicgeek]

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" />

[jahvi]

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.

[chicgeek]

@jahvi Did you see the workaround I posted just above your comment? Have you tried this, or do all CSS instructions get loaded before your fonts?

Alternately, the font-display attribute for @font-face may be of interest to you:

• https://developers.google.com/web/updates/2016/02/font-display?hl=en
• https://tabatkins.github.io/specs/css-font-display/

[jahvi]

@chicgeek It does work for 'new' stylesheets but if they've been registered in the parent theme like style-m.css it doesn't seem to do anything. font-display is a good alternative but still being able to control the order would be ideal.

This extension seems to work but I haven't tested it throughly:
https://github.com/quickshiftin/mage2-ordered-assets

[jahvi]

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.

[tlygnersjo]

I've got the same problem, while trying to load Google Fonts (via CDN) before a custom CSS file which has the font-family. But Magento does the reverse so that the font won't work.

I'm using Magento 2.1.2. Is there an upcoming fix for this?