WordPress nie wczytuje czcionek lokalnych – jak zdiagnozować błąd?

Wprowadzenie – Lokalne czcionki nie ładują się poprawnie

Czcionki lokalne w WordPress nie działają? To jeden z najczęstszych problemów związanych z typografią w WordPressie. Zamiast eleganckich, niestandardowych fontów widzisz domyślne systemowe czcionki, a Twoja strona traci na wyglądzie i spójności wizualnej.

Problem z wczytywaniem lokalnych czcionek może mieć kilka przyczyn – od prostych błędów w ścieżkach do plików, przez nieprawidłową konfigurację CSS, po skomplikowane problemy z serwerem, uprawnieniami czy polityką CORS. W tym przewodniku przeprowadzę Cię przez systematyczny proces diagnozowania i rozwiązywania tych problemów.

Hostowanie czcionek lokalnie ma ogromne zalety – lepsza prywatność użytkowników (brak śledzenia przez Google Fonts), szybsze ładowanie strony (mniej zewnętrznych żądań) i pełna kontrola nad fontami. Warto więc naprawić problemy z ich wczytywaniem zamiast rezygnować i wracać do zewnętrznych dostawców czcionek.

Krok 1: Sprawdzenie ścieżek do plików czcionek

Najczęstszą przyczyną problemów z czcionkami są błędne ścieżki do plików. Zanim przejdziesz do bardziej zaawansowanych kroków, upewnij się że ścieżki są poprawne.

Gdzie WordPress przechowuje czcionki?

Typowe lokalizacje plików czcionek w WordPress:

• W motywie: wp-content/themes/twoj-motyw/fonts/
• W motywie child: wp-content/themes/child-theme/fonts/
• W folderze uploads: wp-content/uploads/fonts/
• W katalogu głównym motywu: wp-content/themes/twoj-motyw/assets/fonts/

Jak sprawdzić czy ścieżka jest poprawna?

1. Otwórz narzędzia deweloperskie przeglądarki (klawisz F12)
2. Przejdź do zakładki Network (Sieć)
3. Odśwież stronę (F5)
4. Filtruj wyniki wpisując \"font\" lub \"woff\" w pole wyszukiwania
5. Sprawdź status HTTP dla plików czcionek

Kody statusu HTTP i ich znaczenie:

• 200 OK – czcionka załadowana poprawnie
• 404 Not Found – błędna ścieżka do pliku
• 403 Forbidden – problem z uprawnieniami
• 500 Internal Server Error – błąd serwera

Najczęstsze błędy w ścieżkach:

• Ścieżki względne vs absolutne: Używanie nieprawidłowego typu ścieżki w CSS
• Wielkie vs małe litery: Serwery Linux rozróżniają wielkość liter w nazwach plików
• Spacje w nazwach: Spacje w nazwach plików mogą powodować problemy
• Brakujące rozszerzenia: Upewnij się że plik ma prawidłowe rozszerzenie (woff2, woff, ttf)

Jak poprawić ścieżki w CSS?

Jeśli używasz ścieżek względnych, upewnij się że są obliczane względem lokalizacji pliku CSS, nie strony HTML. Najlepszą praktyką jest używanie ścieżek względnych od katalogu głównego motywu lub absolutnych URL.

Krok 2: Analiza @font-face w CSS

Nawet jeśli ścieżki są poprawne, błąd w składni CSS może uniemożliwić załadowanie czcionek. Deklaracja font-face musi być precyzyjna i kompletna.

Anatomia poprawnej deklaracji @font-face

Poprawna deklaracja font-face powinna zawierać:

• font-family: Unikalna nazwa czcionki (używana później w CSS)
• src: Ścieżka do pliku czcionki z określonym formatem
• font-weight: Grubość czcionki (400 dla regular, 700 dla bold)
• font-style: Styl (normal, italic, oblique)
• font-display: Strategia renderowania (swap, block, fallback)

Najczęstsze błędy w deklaracji @font-face

Błąd 1: Nieprawidłowy format w URL

Każdy plik czcionki wymaga określenia formatu. Bez tego przeglądarka może nie rozpoznać typu pliku.

Błąd 2: Brak fallbacków dla różnych przeglądarek

Starsze przeglądarki nie obsługują WOFF2. Zawsze dodawaj fallbacki dla WOFF i TTF.

Błąd 3: Jedna deklaracja dla wszystkich wariantów

Każdy wariant czcionki (regular, bold, italic, bold-italic) wymaga oddzielnej deklaracji font-face z odpowiednim font-weight i font-style.

Błąd 4: Niespójna nazwa font-family

Nazwa w deklaracji font-face musi dokładnie odpowiadać nazwie używanej w font-family w CSS. Nawet spacja czy wielka litera może spowodować, że czcionka nie zadziała.

Krok 3: Testowanie MIME types dla czcionek

MIME types (typy multimedialne) informują przeglądarkę o typie przesyłanego pliku. Bez prawidłowo skonfigurowanych MIME types serwer może blokować wczytywanie czcionek.

Wymagane MIME types dla czcionek

• WOFF2: font/woff2 lub application/font-woff2
• WOFF: font/woff lub application/font-woff
• TTF: font/ttf lub application/x-font-ttf
• OTF: font/otf lub application/x-font-opentype
• EOT: application/vnd.ms-fontobject

Jak sprawdzić MIME type czcionki?

1. Otwórz narzędzia deweloperskie (F12)
2. Przejdź do zakładki Network
3. Kliknij na plik czcionki w liście załadowanych zasobów
4. Sprawdź sekcję Response Headers
5. Znajdź nagłówek Content-Type

Jak dodać MIME types na serwerze Apache?

Jeśli MIME types nie są skonfigurowane, możesz dodać je do pliku htaccess w katalogu głównym WordPress. Dodaj następujące dyrektywy aby serwer prawidłowo identyfikował pliki czcionek.

Jak dodać MIME types na serwerze Nginx?

W konfiguracji Nginx należy dodać odpowiednie typy MIME w pliku nginx.conf lub w konfiguracji konkretnej witryny. Dodaj wpisy types aby serwer Nginx rozpoznawał pliki czcionek.

Weryfikacja po zmianach

Po dodaniu MIME types:

1. Zrestartuj serwer WWW (jeśli masz dostęp)
2. Wyczyść cache przeglądarki
3. Odśwież stronę z wyczyszczonym cache (Ctrl+Shift+R)
4. Sprawdź ponownie Content-Type w narzędziach deweloperskich

Krok 4: Rozwiązanie konfliktów z CORS

CORS (Cross-Origin Resource Sharing) to mechanizm bezpieczeństwa przeglądarek, który może blokować ładowanie czcionek z innych domen. Błędy CORS są szczególnie częste gdy:

• Używasz CDN do serwowania czcionek
• Czcionki są na innej subdomenie (np. cdn.twojastrona.pl)
• Strona używa HTTPS, a czcionki są na HTTP (lub odwrotnie)

Jak rozpoznać błąd CORS?

Otwórz konsolę przeglądarki (F12 → Console). Błąd CORS wygląda podobnie do tego komunikatu: \"Access to font has been blocked by CORS policy: No Access-Control-Allow-Origin header is present\".

Rozwiązanie 1: Dodanie nagłówków CORS w htaccess (Apache)

Dla serwera Apache dodaj odpowiednie nagłówki w pliku htaccess aby umożliwić ładowanie czcionek z innych domen. Dyrektywa FilesMatch pozwala określić typy plików, dla których mają być wysyłane nagłówki CORS.

Rozwiązanie 2: Konfiguracja CORS w Nginx

W konfiguracji Nginx dodaj blok location obsługujący pliki czcionek z odpowiednimi nagłówkami CORS.

Rozwiązanie 3: Konfiguracja CORS dla CDN

Jeśli używasz CDN (Cloudflare, CloudFront, KeyCDN):

• Cloudflare: Przejdź do Network → Enable CORS for fonts
• CloudFront: Dodaj nagłówek Origin w whitelist headers
• KeyCDN: Włącz opcję CORS w ustawieniach strefy

Rozwiązanie 4: Przeniesienie czcionek na tę samą domenę

Najprostsze rozwiązanie to umieszczenie czcionek na tej samej domenie co strona. Dzięki temu unikniesz wszystkich problemów z CORS. Skopiuj pliki czcionek do folderu wp-content/themes/twoj-motyw/fonts/ i zaktualizuj ścieżki w CSS.

Krok 5: Weryfikacja uprawnień do plików

Nawet jeśli wszystkie poprzednie kroki są wykonane poprawnie, niewłaściwe uprawnienia do plików mogą uniemożliwić serwerowi udostępnienie czcionek przeglądarce.

Zalecane uprawnienia dla plików czcionek

• Foldery: 755 (rwxr-xr-x)
• Pliki czcionek: 644 (rw-r--r--)

Jak sprawdzić uprawnienia przez FTP/SFTP?

1. Połącz się z serwerem przez FTP/SFTP (FileZilla, WinSCP)
2. Przejdź do folderu z czcionkami
3. Kliknij prawym przyciskiem na folder → Właściwości/Permissions
4. Sprawdź ustawienia uprawnień

Jak zmienić uprawnienia przez FTP?

W kliencie FTP:

1. Zaznacz folder z czcionkami
2. Kliknij prawym → File Permissions
3. Ustaw 755 dla folderów
4. Zaznacz opcję \"Recurse into subdirectories\"
5. Wybierz \"Apply to directories only\"
6. Kliknij OK

Następnie dla plików:

1. Zaznacz wszystkie pliki czcionek
2. File Permissions → 644
3. Apply to files only
4. OK

Problemy z właścicielem plików

Czasem problem leży nie w uprawnieniach, ale w właścicielu plików. Pliki powinny należeć do użytkownika serwera WWW (www-data, apache, nginx). Jeśli masz dostęp SSH, możesz sprawdzić i zmienić właściciela plików odpowiednimi poleceniami systemowymi.

Krok 6: Alternatywne metody ładowania czcionek

Jeśli standardowe metody zawodzą, istnieją alternatywne sposoby ładowania lokalnych czcionek w WordPress.

Metoda 1: Preload dla czcionek

Preload to technika, która informuje przeglądarkę że czcionka jest krytyczna i powinna być załadowana priorytetowo. Dodaj tag link z atrybutem rel=\"preload\" w sekcji head WordPress. Możesz to zrobić przez functions.php motywu dodając funkcję hook do wp_head.

Metoda 2: Inline Base64 (dla małych czcionek)

Dla bardzo małych plików czcionek (np. ikonek) możesz zakodować je jako Base64 i wstawić bezpośrednio w CSS. Ta metoda eliminuje dodatkowe żądania HTTP, ale zwiększa rozmiar pliku CSS.

Uwaga: Ta metoda jest zalecana tylko dla małych plików (poniżej 10KB). Dla większych czcionek zwiększy rozmiar CSS i spowolni stronę.

Metoda 3: Wykorzystanie wtyczek WordPress

Istnieją wtyczki, które automatyzują proces hostowania lokalnych czcionek:

• OMGF (Optimize My Google Fonts): Automatycznie pobiera czcionki z Google Fonts i hostuje lokalnie
• Self-Hosted Google Fonts: Konwertuje Google Fonts na lokalne
• Local Google Fonts: Cache'uje Google Fonts lokalnie

Metoda 4: Font Display Swap

Właściwość font-display kontroluje jak przeglądarka renderuje tekst podczas ładowania czcionki. Ustawienie swap pokazuje tekst w czcionce systemowej, a następnie podmienia na niestandardową gdy się załaduje.

Wartości font-display:

• auto: Przeglądarka decyduje (zazwyczaj block)
• block: Tekst niewidoczny do załadowania czcionki (max 3s)
• swap: Pokazuje fallback natychmiast, podmienia po załadowaniu
• fallback: Kompromis między block i swap
• optional: Używa czcionki tylko jeśli załaduje się bardzo szybko

Podsumowanie – Poprawnie wyświetlane czcionki lokalne

Problemy z wczytywaniem lokalnych czcionek w WordPress mogą być frustrujące, ale systematyczne podejście do diagnozy pozwala je skutecznie rozwiązać. Przyjrzyjmy się podsumowaniu kroków naprawczych.

Checklista diagnozowania problemów z czcionkami

Krok 1: Podstawowa weryfikacja

• Sprawdź czy pliki czcionek istnieją na serwerze
• Zweryfikuj ścieżki do plików w CSS
• Użyj narzędzi deweloperskich aby sprawdzić status HTTP
• Upewnij się że nazwy plików są poprawne (wielkość liter, spacje)

Krok 2: Analiza CSS

• Sprawdź składnię deklaracji font-face
• Zweryfikuj spójność nazw font-family
• Dodaj właściwość font-display: swap
• Upewnij się że masz deklaracje dla wszystkich wariantów czcionki

Krok 3: Konfiguracja serwera

• Sprawdź MIME types w nagłówkach HTTP
• Dodaj obsługę MIME types w htaccess lub nginx.conf
• Skonfiguruj nagłówki CORS jeśli używasz CDN
• Zweryfikuj uprawnienia do plików (755/644)

Krok 4: Optymalizacja i testowanie

• Wyczyść wszystkie cache (przeglądarka, wtyczki, CDN)
• Przetestuj na różnych przeglądarkach
• Sprawdź czcionki na urządzeniach mobilnych
• Użyj preload dla krytycznych czcionek

Najczęstsze błędy i szybkie rozwiązania

Problem: Czcionki działają lokalnie, ale nie na produkcji

Rozwiązanie: Sprawdź ścieżki względne vs absolutne, uprawnienia plików i konfigurację serwera produkcyjnego.

Problem: Czcionki działały, przestały po aktualizacji motywu

Rozwiązanie: Aktualizacja mogła nadpisać pliki CSS. Użyj motywu child i przywróć własne deklaracje font-face.

Problem: Czcionki działają w Chrome, nie działają w Firefox/Safari

Rozwiązanie: Dodaj fallbacki dla różnych formatów czcionek (WOFF2, WOFF, TTF) w deklaracji font-face.

Problem: Konsola pokazuje błędy CORS

Rozwiązanie: Dodaj nagłówki Access-Control-Allow-Origin w htaccess lub przenieś czcionki na tę samą domenę.

Kiedy rozważyć alternatywne rozwiązania?

Jeśli po wykonaniu wszystkich kroków czcionki nadal nie działają, rozważ:

• Użycie wtyczki OMGF: Automatyzuje cały proces hostowania lokalnego
• Zmianę hostingu: Niektóre hostingi mają restrykcyjne ustawienia bezpieczeństwa
• Kontakt z supportem hostingu: Mogą istnieć specyficzne blokady na poziomie serwera
• Powrót do Google Fonts: Jako tymczasowe rozwiązanie na czas diagnozowania

Dobre praktyki dla hostowania lokalnych czcionek

• Używaj formatów WOFF2 (najlepsza kompresja) z fallbackiem WOFF
• Zawsze dodawaj font-display: swap dla lepszej wydajności
• Ogranicz liczbę wariantów czcionek (tylko te rzeczywiście używane)
• Używaj preload tylko dla 1-2 najważniejszych czcionek
• Regularnie testuj czcionki po aktualizacjach motywu/WordPressa
• Dokumentuj używane czcionki i ich lokalizacje
• Twórz backup plików czcionek przed aktualizacjami

Lokalne hostowanie czcionek to inwestycja w prywatność użytkowników i wydajność strony. Choć początkowa konfiguracja może być wyzwaniem, prawidłowo zaimplementowane czcionki lokalne działają szybciej i pewniej niż zewnętrzne źródła.

Jeśli chcesz dowiedzieć się więcej o optymalizacji wydajności WordPress, polecam nasz artykuł o analizie Core Web Vitals w Google Search Console, który zawiera dodatkowe wskazówki dotyczące optymalizacji zasobów.