Send me an Email
Branko Šerić on LinkedIn
WordPress stranica s otvorenim DevTools prikazuje ispravno učitane fontove i CSS pravila za fontove.
WP Pomoć

Problemi s prikazom fontova

U današnje vrijeme tipografija igra ključnu ulogu u izgledu i čitljivosti vaše WordPress stranice. Ako primijetite da fontovi nisu pravilno prikazani – bilo da su preveliki, premali, zamijenjeni ili se uopće ne učitavaju – postoji nekoliko mogućih uzroka. Ovaj članak donosi pregled najčešćih problema s prikazom fontova i praktične savjete za njihovo rješavanje.

Zašto fontovi ne rade kako treba?

Postoji nekoliko razloga zbog kojih se fontovi mogu nepravilno prikazivati:

  • Cache preglednika i WordPress cache: Preglednik ili caching plugin može učitavati staru verziju CSS datoteka u kojima su definirani fontovi.
  • CDN cache: Ako koristite Content Delivery Network (CDN), moguće je da CDN poslužuje zastarjele ili neispravne verzije fontova.
  • Neispravno učitavanje fontova: Greške u putanjama do font datoteka ili loše definirani @font-face pravila mogu uzrokovati probleme.
  • Neusklađenost CSS-a: Konflikt između različitih CSS pravila ili neadekvatno korištenje font-family vrijednosti može dovesti do neispravnog prikaza.
  • Problemi s dozvolama: Neispravno postavljene dozvole na poslužitelju mogu spriječiti učitavanje font datoteka.

Kako riješiti probleme s prikazom fontova?

1. Očistite cache

  • Preglednik: Osvježite stranicu pritiskom na CTRL + F5 ili ručno očistite cache.
  • WordPress cache: Ako koristite caching plugin (npr. WP Rocket ili LiteSpeed Cache), očistite cache putem njihovih postavki.
  • CDN: Ispraznite cache unutar vašeg CDN servisa ili privremeno pauzirajte CDN kako biste testirali nove postavke.

2. Provjerite putanje i @font-face pravila

Pregledajte svoj CSS i osigurajte da su putanje do font datoteka ispravne. Primjer pravilnog @font-face pravila:

cssCopyEdit@font-face {
    font-family: 'CustomFont';
    src: url('fonts/CustomFont.woff2') format('woff2'),
         url('fonts/CustomFont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

Pazite da se relativne putanje podudaraju s lokacijom fontova na vašem poslužitelju.

3. Ažurirajte verziju CSS datoteke

Dodavanje verzije CSS datoteci može prisiliti preglednike da učitaju najnoviju verziju. U functions.php datoteci vaše teme, registrirajte stilove na sljedeći način:

phpCopyEditfunction custom_enqueue_styles() {
    wp_enqueue_style('custom-style', get_stylesheet_directory_uri() . '/style.css', array(), time());
}
add_action('wp_enqueue_scripts', 'custom_enqueue_styles');

4. Provjerite dozvole datoteka

U slučaju da font datoteke nisu dostupne, provjerite dozvole. Folder u kojem se nalaze fontovi obično treba imati dozvolu 755, a same datoteke 644.

5. Provjerite kompatibilnost CSS pravila

Ako se fontovi i dalje ne prikazuju kako treba, provjerite postoji li konflikt između CSS pravila. Možda će biti potrebno prilagoditi specifičnost selektora ili dodati !important (s oprezom) kako bi se osiguralo primjenjivanje željenih stilova.

Prevencija problema s prikazom fontova

Kako biste dugoročno spriječili probleme s fontovima:

  • Redovito očistite cache nakon svake izmjene u dizajnu.
  • Ažurirajte temu i pluginove kako biste osigurali kompatibilnost sa suvremenim web standardima.
  • Koristite provjerene fontove i pouzdane servise za hosting fontova.
  • Testirajte stranicu na različitim uređajima i preglednicima kako biste osigurali konzistentan prikaz.

Ako ste isprobali gore navedene korake i problem i dalje postoji, možda je vrijeme za stručnu pomoć. Kontaktirajte me i rješit ćemo problem brzo i učinkovito!