If you use a web-font that is loaded from an online source (either the same host as the website or fonts.google.com for instance), it often takes a moment for the font to load in and be applied. One thing you can do to reduce the visibility of this is to choose a browser default font that is closer to the appearance of the web-font. For instance, Times New Roman is visually quite different from Open Sans, but Arial & Helvetica are relatively similar, so if you are loading in Open Sans from an online source you can set your font using a css string like this to reduce the visual change: font-family: "Open Sans", Arial, Helvetica, sans-serif;
Some other steps you can take:
- Make sure you aren't setting a bunch of different font-family styles on individual elements - be clean and specific with your CSS.
- Make sure your webfonts are being called early in the
<head> of the document, and that any online source you use has a nice fast CDN.
- If the flashing persists and really bothers you, set a "loading" period on your document by adding a loading class to the body, styling it to cover the site content and show a loading notice, then remove the loading class using script in the window load event.