FOFT – Flash of Faux Text

[philipschm1tt]

I’m studying Zach Leatherman’s overview of font loading strategies: https://www.zachleat.com/web/comprehensive-webfonts/#critical-foft
https://www.zachleat.com/web/foft/

The most promising approaches use "Critical FOFT".
The flash of faux text means that only the regular font is loaded first and the bold/italic variants use the regular font with the browser-genreated font-style. The bold/italic variants are later replaced with the actual bold/italic fonts once they are downloaded.

This is close to what subfont does, but even more efficient: there is only one preloaded font. So fewer requests and less to download.

Might that approach make sense for subfont?
That is, if you could select a single font to prioritize with a subset for all variants, you might gain performance.

Have you considered the FOFT approach?

I’m still amazed by how easy you get a state of the art font loading setup with subfont. :)

[Munter]

I have considered the FOFT approach, but have not prioritized it yet. So far the priority has been on creating a setup that can always run, requires no manual intervention and has no JS dependency. The FOFT approach definitely requires js, and might need manual intervention.

I haven't ruled it out though. We are doing some experimental work in automating the generation of font metrics for the fallback font, so any flash of fallback text won't jump the text around. That can only be achieved with JS to switch the styles. I might revisit the FOFT approach then, when I can find some time to do another big deep dive in this project.

I can certainly also imagine a future for subfont where you get to choose a font loading strategy, but I don't quite know how to abstract the current implementation enough to make things so flexible yet.

[papandreou]

I think this is a great idea, thanks for bringing it up! I can try looking into it when we've tested and reviewed the currently outstanding PRs.

[philipschm1tt]

I didn't think this through, but I wondered if there was a way to do this without JavaScript.

For my site I know that I have one typeface via two fonts (normal, bold).
I imagined that I could tell subfont what the primary font is and which fonts are variants of that font.
Subfont could then build one subset of the primary font based on the text for all variants.

Unfortunately, prepending the subset to the variant font families and using the glyph fallback would not work. I wondered if font-display: swap works if you append the subset font after the non-subset one so that it shows the fallback first. Caniuse says font-display is at around 80%.

I didn’t consider that webfonts are always declared with normal font-weight (even the bold ones). So this may not be possible without using JavaScript.

Thanks for reading, though :)

[Munter]

My conclusion so far, based on my own reasearch and that of @zachleat, is that a non-javascript solution is not possible for using font synthesis during a temporary font-rendering state while loading more fonts.

I do think that it is within the realm of possibility to automate a js-based solution, not unlike the one that Zach demonstrated in his 5 Y's talk