This blog has 3 FOUTs - first - the default fonts appear, next - all fonts disappear and after this everything appears as it was at the first time and only after it the correct fonts are loaded.
This is why
font-display: < auto | block | swap | fallback | optional >
More info: https://tabatkins.github.io/specs/css-font-display/
----------
Alternatively, something I've been trying is loading fonts in an embedded stylesheet (<style></style>) in the <body> element, loading critical CSS in the <head>.
This results in content being displayed in a base/system font initially, and then when the web font is loaded in the body, it replaces the base font, but without blocking render and at the same time resulting in only one brief FOUT.