How To Stop Custom Font Flickering On Page Load

When you use a custom font via @font-face, you tend to see unstyled text for a brief moment before your font files are fully loaded and applied. This issue has been coined the name "Flash Of Unstyled Text", or FOUT for short.

Fortunately, this can be fixed without much trouble.

@font-face {
  font-family: "My Font";
  src: url("/fonts/My-Font.otf");
  font-display: block; /* Fix flickering */
}

What this does is replace the unstyled text with an invisible placeholder until your custom font files have fully loaded.