I have introduced various web font optimization techniques, but there are situations in which you want to avoid FOUT / FOIT by all means, such as with first view catch phrases and logos, as well as icon fonts used for user interface element.

Although it is a last resort, there is a method that involves embedding the font with Base64.

Directly specify the WOFF2 containing only the necessary glyphs to src in @font-face as a Data URL, and inline it into your HTML. By doing so, fonts are applied at initial rendering without waiting for external resources, avoiding FOUT / FOIT.

It must be noted that Base64 increases the size of font files, reduces font cache efficiency, and may also increase the first contentful paint (FCP) time due to the increase in HTML file sizes. Therefore, it is necessary to make the fonts to be loaded as small as possible (approx. a few KB). It is also necessary to allow Data URL in Content Security Policy (CSP) settings.

As this method constitutes modification of the font file, you must clarify font licensing and rights.

(LN)