Hi
I guess when working with Google Fonts you can just drop the &display=swap that comes on the end of the served URL. The font will behavior as a font-display: block;
ex. <link href="https://fonts.googleapis.com/css2?family=Bebas+Neue" rel="stylesheet" />
For me, it worked pretty fine, without real notice of the delay, and giving - in my opinion - an experience way better than with FOUT.
I felt this post needed a clarification. Although, as of January, you cannot load otf files, loading other font files (ttf, woff, woff2, eot) is possible using the pattern on the following thread:
This seems to be an efficient way to load Google fonts as of now. Hopefully this will save someone the couple of hours worth of confusion I had when thinking a direct file import would not work.
Quick note . I found this simple method for resolving FOUT (Flash of Unstyled Text) in React
useEffect(() => {
document.fonts.load("12px Merriweather").then(() => setIsReady(true));
}, [])
And then check isReady before showing your page content