Reduce page display flickering when using many flexbox, image icons, fonts

I have a HTML page with many uses of flexbox and a few icons div with CSS background-image.

When opening the HTML page (even locally, without using networking) in the browser, there is some little flickering (probably less than 100 milliseconds, but still):

• some items move a few pixels (because of flexbox centering)

• some icons take a few milliseconds to load

• fonts take a few dozens of milliseconds to load, so we can see the content displayed with default font (maybe < 50 ms) and then with the right font (@font-face...)

How to ask the browser to only display/show a HTML element such as a toolbar <div class="header-toolbar"> only when it's ready to be 100% painted in a definitive way (without further moving/flickering)?

from Reduce page display flickering when using many flexbox, image icons, fonts