WORK IN PROGRESS! The following instructions are not correct!
Foity Toity is a font that makes all text disappear. It contain an empty, zero width glyph for every Unicode code point.
Foity Toity is based on Adobe Blank 2 with some optimisations applied (it's about one third the size of Adobe Blank 2).
Text on a website will be shown in a fallback font until your web font has finished loaded. This is the FOUT and is usually desirable: your visitors can start reading the text right away. But there are situations where you might want to keep the text invisible until your web font has loaded: the FOIT.
For example when using icon fonts, to make sure you definitely don't see anything until the icon font has loaded. Or font specimens, portfolios or design-heavy sites where you deliberately want to wait till your web font has loaded.
Foity Toity is a super tiny CSS snippet (690 bytes) that inlines a font that makes all text invisible. Put the hoity-toity.css snippet it in your <head> so it's immediately available. Then use it after your desired font in the font stack, like so:
h1 {
font-family: MyDesiredFont, foity-toity;
}
Foity Toity uses a WOFF2 font, so some older browsers aren't supported. If you want this to work in IE11 and similar vintage web surfing software, use foity-toity-legacy.css which uses an OTF font. If you need the font binaries, check the fonts directory.
Open an issue or ping me on @pixelambacht!