FOUT (Flash of Unstyled Text) to zjawisko, w którym przeglądarka najpierw wyświetla tekst przy użyciu awaryjnej czcionki systemowej, a dopiero po pobraniu docelowego fontu podmienia go na właściwy krój. Użytkownik widzi wtedy krótki „przeskok” typografii — tekst na moment zmienia wygląd, szerokość liter i odstępy. To celowe zachowanie mechanizmu ładowania fontów, którego zadaniem jest jak najszybsze udostępnienie treści do czytania.
FOUT jest przeciwieństwem FOIT (Flash of Invisible Text), gdzie tekst jest przez chwilę całkowicie niewidoczny, dopóki font się nie załaduje. Z perspektywy dostępności i szybkości odczytu treści FOUT jest zwykle korzystniejszy dla użytkownika niż pusta przestrzeń.
Jak FOUT działa w praktyce
FOUT pojawia się w momencie, gdy strona odwołuje się do własnego fontu webowego (np. z Google Fonts lub hostowanego lokalnie), a jego plik nie zdążył się jeszcze pobrać. Przeglądarka podejmuje decyzję na podstawie właściwości font-display zdefiniowanej w regule @font-face — to ona rozstrzyga, czy pojawi się FOUT, FOIT, czy żadne z nich.
Rola właściwości font-display
Właściwość font-display steruje tym, jak przeglądarka renderuje tekst w oczekiwaniu na font. Wartość swap wymusza natychmiastowe pokazanie czcionki zastępczej i późniejszą podmianę — czyli klasyczny FOUT. Wartość block ukrywa tekst na krótki „block period” (zwykle do 3 sekund), co prowadzi do FOIT.
Wartość font-display | Zachowanie | Efekt |
|---|---|---|
swap | Natychmiast czcionka zastępcza, potem podmiana | FOUT |
block | Krótkie ukrycie tekstu, potem font docelowy | FOIT |
fallback | Bardzo krótkie ukrycie, potem szybka rezygnacja z podmiany | Minimalny FOUT |
optional | Font ładowany tylko jeśli zdąży; brak podmiany później | Brak FOUT |
Dlaczego przeskok bywa uciążliwy
Najbardziej odczuwalnym problemem FOUT jest zmiana układu treści, czyli tzw. layout shift. Gdy font zastępczy ma inną szerokość znaków niż docelowy, po podmianie tekst zajmuje inną liczbę linii, a elementy poniżej przeskakują w górę lub w dół. Taki skok obniża komfort czytania i może przesunąć przyciski w momencie, gdy użytkownik chce w nie kliknąć.
Jak ograniczyć widoczność FOUT
Skalę FOUT redukuje się przede wszystkim przez szybsze dostarczenie fontu i dopasowanie czcionki zastępczej. W praktyce stosuje się preładowanie plików fontów tagiem <link rel="preload">, hostowanie fontów lokalnie zamiast z zewnętrznego serwera oraz format woff2, który jest najlżejszy. Do tego dochodzą właściwości size-adjust, ascent-override i descent-override, które pozwalają dopasować metryki czcionki zastępczej do docelowej i zminimalizować przeskok layoutu.
Znaczenie dla SEO i widoczności
FOUT ma bezpośredni wpływ na SEO poprzez metrykę Cumulative Layout Shift (CLS) z zestawu Core Web Vitals. Przeskok tekstu po podmianie fontu generuje niestabilność układu, a Google traktuje wysoki CLS jako sygnał gorszego doświadczenia użytkownika. Zalecany próg CLS to wartość poniżej 0,1, więc źle skonfigurowane fonty potrafią realnie zaszkodzić ocenie strony.
Jednocześnie sam FOUT bywa lepszym wyborem niż FOIT z punktu widzenia szybkości renderowania treści. Tekst dostępny natychmiast (dzięki font-display: swap) skraca czas, w którym użytkownik i roboty widzą wartościową treść, co wspiera lepszy odbiór strony. Sztuką jest połączyć szybkie pokazanie tekstu z brakiem widocznego skoku — i to właśnie sprawdzamy podczas audytu SEO pod kątem wydajności.
W kontekście pozycjonowania stron optymalizacja fontów to jeden z elementów technicznego SEO, który często jest pomijany, a daje mierzalne efekty w Core Web Vitals bez ingerencji w treść czy strukturę linków.
font-display: swap bez dopasowania metryk czcionki zastępczej. Najczęstszy błąd, jaki widzimy w audytach, to preload fontu bez ustawienia size-adjust — tekst ładuje się szybko, ale i tak przeskakuje, bo Arial i docelowy font mają różną szerokość znaków. Ustaw fallback tak, by zajmował dokładnie tyle samo miejsca, a CLS spadnie niemal do zera.FAQ
Czym różni się FOUT od FOIT?
FOUT (Flash of Unstyled Text) pokazuje tekst od razu w czcionce zastępczej i podmienia go po pobraniu docelowego fontu. FOIT (Flash of Invisible Text) natomiast ukrywa tekst całkowicie, dopóki font się nie załaduje. Dla większości stron FOUT jest bezpieczniejszy, bo treść jest czytelna od pierwszej chwili.
Jak wyłączyć lub ograniczyć FOUT?
FOUT ograniczysz, preładowując pliki fontów przez <link rel="preload">, używając lekkiego formatu woff2 i hostując fonty lokalnie. Aby całkowicie uniknąć podmiany, można zastosować font-display: optional, który pomija docelowy font, jeśli nie zdąży się załadować w oknie kilkuset milisekund.
Czy FOUT szkodzi pozycjonowaniu?
FOUT sam w sobie nie jest karany, ale może pogarszać metrykę CLS z Core Web Vitals, jeśli powoduje przeskoki układu. Google uwzględnia doświadczenie strony w rankingu, więc niestabilny layout wynikający z podmiany fontu pośrednio wpływa na widoczność. Dobrze skonfigurowany FOUT bez skoków layoutu jest neutralny lub wręcz korzystny.
Co powoduje FOUT na stronie?
FOUT wynika z opóźnienia w pobraniu pliku fontu webowego względem momentu, w którym przeglądarka renderuje tekst. Najczęstsze przyczyny to fonty ładowane z zewnętrznych serwerów, brak preloadu, ciężkie formaty plików oraz właściwość font-display: swap bez dopasowanej czcionki zastępczej.
Font pod kontrolą, czyli typografia bez przeskoków
FOUT nie jest błędem, lecz mechanizmem, który wystarczy dobrze skonfigurować — szybki font, dopasowany fallback i preload sprawiają, że użytkownik nie zauważa żadnego przeskoku. W Webiti traktujemy optymalizację fontów jako stały element technicznego SEO wpływającego na Core Web Vitals. Jeśli chcesz sprawdzić, czy Twoja strona nie traci punktów w CLS przez fonty, zajrzyj do naszej oferty audytu SEO lub kompleksowego pozycjonowania stron.
