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.
This is why
is going to be useful.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.