FOIT: Flash of Invisible Text

Als FOIT (Flash of Invisible Text) bezeichnet man den Zustand bei dem während des Ladevorgangs einer eigenen Webfont kein Text ausgegeben wird. Dauert er an führt es zu schlechter Nutzererfahrung und bei einem Ladefehler wird im Worst Case kein Text angezeigt. Vermeiden kann man das durch den Einsatz eines Javascript Font-Loaders, der die Darstellung erst initiiert wenn die Schriftart fertig geladen ist. Allerdings führt diese Implementierung immer zu FOUT und somit bei jeder Darstellung zu Layout-Verschiebungen. In Zeiten von Core Web Vitals ist auch das zu vermeiden. Die bessere Methode um FOIT zu vermeiden ist die CSS-Direktive font-display: swap; bei der Einbindung über @font-face. Somit wird nämlich nicht nur FOIT, sondern in den meisten Fällen auch FOUT vermieden. Wird nämlich die Schriftart schnell genug geladen, so ist keine Layout-Verschiebung sichtbar.