How do you eliminate layout shift and invisible-text flash caused by web fonts, and what is the optimal loading strategy for a performance-critical site?

Imagine you're coloring a picture, but you have to wait for your favorite crayon to arrive before you can start. If you use a different crayon first, the colors might look weird when you switch. We want to use a special trick so the picture looks good right away, without waiting or changing colors.