I am using 5 custom fonts in woff format, which weight 58 KB total and they are defined with @font-face rules. I’m optimizing the site for slow connections and I noticed that Firefox load and show my custom fonts after loading all other page elements like background images. Because my background images are much heavier than the fonts - users with slow connection will wait for the fonts until all graphics gets loaded. Webkit and Edge load and show my custom fonts before loading background images.
I there a way to get Firefox to behave like Webkit and Edge? In my case fonts are more important than background images and would like then to have a priority over the backgrounds. Sure, fallback fonts show much sooner but they don’t look good.
I’m not sure if this will work for you, it’s just an idea and seems a bit of a hack.
Doing the opposite of what this article suggests and using @import to prevent parallel downloads and force a download sequence.
Looking at it further, I think you can do it with link to force the order, but that involves putting the @font-face in a separate css, (which you would probably rather not) and linking to it before the main css.
This will load both in parallel, though the fonts will probably finish first.
Actually, I don’t think this is such a bad idea and I decided to follow this route because of lack of better solutions. I combined this with another idea: put all the fonts inline in the css with data uri’s. Therefore, myFonts.css contain all of my 5 fonts and the file is 58 KB gzipped, which seems acceptable. I may lose a few milliseconds here because the font style sheet is blocking page rendering but at least there is no flash of ugly system fonts in any browser.
Testing this with a slow connection yields good results and I’ll keep it unless I come across a better solution.