Zašto mi se fontovi “trese” pri učitavanju (FOIT/FOUT)?

Šta su FOIT i FOUT?

Fontovi se “trese” zbog dva efekta pri učitavanju web fontova:

  • FOIT (Flash of Invisible Text): Tekst ostaje nevidljiv dok se web font ne učita potpuno, što može izazvati kašnjenje u prikazu sadržaja.
  • FOUT (Flash of Unstyled Text): Prvo se prikazuje sistemski font (fallback), a zatim se zamenjuje web fontom, što dovodi do vidljivog “treptanja”.

Uzroci problema

  • Sporo učitavanje web fontova sa eksternih servera (npr. Google Fonts).
  • Nepodrazumevano ponašanje pregledača: blokira prikaz teksta (FOIT) ili koristi fallback (FOUT).
  • Uticaj na performance sajta, jer usporava renderovanje.

Kako rešiti FOIT/FOUT u WordPress-u

  1. Dodajte font-display svojstvo u CSS: Koristite font-display: swap u @font-face deklaraciji. Ovo prikazuje fallback font odmah, a web font se primenjuje kasnije bez blokiranja.
  2. Primer CSS-a: 
    @font-face {
  font-family: 'MojaFont';
  src: url('mojafont.woff2') format('woff2');
  font-display: swap;
}
  3. U WordPress temi: Dodajte u style.css ili preko Additional CSS u Customizer-u.
  4. Za Google Fonts: Dodajte &display=swap u URL, npr.: https://fonts.googleapis.com/css2?family=Roboto&display=swap.
  5. Optimizujte performanse: Hosting je ključna karika u brzini učitavanja. WP Host nudi najkvalitetniji i najbrži WordPress Hosting u Srbiji sa LiteSpeed serverima i NVMe SSD diskovima, što ubrzava učitavanje fontova do 40% u poređenju sa klasičnim hostingom.

Za dodatnu pomoć, kontaktirajte našu 24/7 podršku specijalizovanu za WordPress.

← Nazad na: Wordpress