I added the attribute rel=\"preload\" to all css links like this :
I found a possibly best solution is to load two files as below - browsers that support preload will use it as intended and those that don't (like Firefox) will only use the regular (2nd link). This solution doesn't require using the onload="this.rel='stylesheet'" since the style is used right after the preload:
What I also discovered is a hacky alternative to the above could be including "rel" twice, like: