FOUT (Flash of Unstyled Text) to efekt, w którym strona najpierw wyświetla tekst domyślną czcionką systemową, a po pobraniu czcionki internetowej podmienia go na docelowy krój. Użytkownik widzi treść od razu, ale może zauważyć skok wyglądu i położenia tekstu.
Czym FOUT różni się od FOIT?
Przy FOIT tekst jest niewidoczny do chwili pobrania czcionki, a przy FOUT widoczny od początku, tylko w innym kroju. Większość specjalistów woli FOUT, bo nie ukrywa treści, co jest korzystniejsze dla szybkości odbioru i dostępności.
Jak złagodzić skutki?
Dobierz czcionkę zastępczą o zbliżonych proporcjach i użyj właściwości size-adjust, ascent-override oraz descent-override w @font-face, aby rozmiar tekstu był podobny. Dzięki temu podmiana powoduje mniejsze przesunięcia układu.
Wpływ na CLS
Podmiana czcionki o innych wymiarach może przesunąć akapity i zwiększyć wskaźnik CLS. Preload kluczowej czcionki i dopasowanie fallbacku skracają okres, w którym efekt jest widoczny.
Zobacz w praktyce
Jak ładować czcionki na stronie bez efektu znikania tekstu i migania ekranu?
Core Web Vitals - poradnik jak poprawić wskaźniki
Refaktoryzacja CSS – jak usunąć 80% nieużywanego kodu i przyspieszyć renderowanie (FCP)