"NOWOŚĆ" wygląda jak "NOWOS'C'", ogonki latają gdzieś obok liter, a co dziwniejsze, na jednej podstronie polskie znaki wyświetlają się pięknie, a na innej krzaczą. Znam ten problem z forum i wiem, jak potrafi frustrować, bo wygląda na losowy. Nie jest losowy. Ma dwie klasyczne przyczyny: font załadowany bez polskich znaków albo dwa różne fonty walczące o tę samą stronę. W tym artykule nauczysz się rozpoznawać obie, naprawiać je na stałe i wybierać fonty, które nigdy nie zrobią Ci tego numeru.
Jak to w ogóle możliwe, że "font ma polskie znaki, a strona nie"
Zacznę od wyjaśnienia, które rozjaśnia 90 procent przypadków. Fonty z Google Fonts są dzielone na zestawy znaków (subsety): podstawowy latin zawiera alfabet łaciński bez znaków diakrytycznych, a dopiero rozszerzony latin-ext dokłada polskie ą, ę, ś, ć, ż i spółkę. Jeśli font został załadowany na stronę tylko w wersji latin, przeglądarka robi rzecz podstępną: litery podstawowe wyświetla Twoim fontem, a brakujące polskie znaki pożycza z fontu zastępczego. Stąd ten charakterystyczny objaw: polskie znaki niby są, ale wyglądają inaczej, są przesunięte, grubsze albo z innej bajki. To nie font się zepsuł, to dwa fonty udają jeden.
Dlatego pierwsze pytanie diagnostyczne zawsze brzmi: czy problem dotyczy wyłącznie polskich znaków (wtedy niemal na pewno subset), czy całych bloków tekstu wyglądających inaczej (wtedy konflikt dwóch fontów, o którym za chwilę).
Przyczyna 1: font bez zestawu latin-ext
Naprawa zależy od tego, skąd font trafia na stronę:
Font wybierany z listy w Elementorze lub motywie: zwykle ładowany jest z pełnym zestawem znaków, ale bywa, że wtyczki optymalizujące fonty (lub opcje "local fonts") pobierają wersję okrojoną. Jeśli używasz wtyczki hostującej fonty lokalnie, sprawdź w jej ustawieniach, czy pobrany plik zawiera zestaw latin-ext, i w razie potrzeby pobierz font ponownie z zaznaczonym rozszerzonym zestawem.
Font wgrany ręcznie z pliku: tu najczęściej leży pies pogrzebany. Plik fontu pobrany "skądś" potrafi zawierać okrojony zestaw znaków. Rozwiązanie: pobierz font ponownie z oficjalnego źródła (Google Fonts pozwala zaznaczyć zestawy znaków przy pobieraniu), usuń stary plik z WordPressa i wgraj nowy. Po podmianie wyczyść pamięć podręczną, bo stare pliki fontów lubią w niej zalegać, o czym pisałam w artykule o wtyczce cache.
Szybki test rozstrzygający: skopiuj nagłówek z podstrony, na której polskie znaki wyglądają dobrze, wklej go w miejsce problematycznego i zapisz. Jeśli po tej podmianie znaki są poprawne, różnica siedziała w ustawieniach konkretnego elementu (inny font, inna grubość, inny wariant), a nie w całej stronie.
I wskazówka na przyszłość, prosto z mojej praktyki: wybierając font do polskiej strony, zawsze sprawdzaj obsługę latin-ext przed zakochaniem się w kroju. W Google Fonts przefiltrujesz fonty po języku polskim jednym kliknięciem. Sama przez lata trzymam się tej zasady, także przy fontach ozdobnych: mój firmowy font odręczny, Pangolin, wybrałam między innymi dlatego, że ma komplet polskich znaków, co przy fontach "handwriting" wcale nie jest oczywiste.
Przyczyna 2: dwa fonty na jednej stronie (Elementor kontra motyw)
Drugi scenariusz z forum: menu na stronie głównej w foncie Poiret One, a po wejściu na produkt w sklepie to samo menu nagle w Playfair Display. Skąd ta zmiana? Z podwójnej definicji: font był ustawiony w dwóch miejscach naraz, w ustawieniach globalnych Elementora i w kreatorze nagłówka motywu Astra. Różne podstrony renderują nagłówek różnymi mechanizmami, więc raz wygrywa jedna definicja, raz druga.
Jak to zdiagnozować bez zgadywania: kliknij problematyczny element prawym przyciskiem, wybierz Zbadaj i spójrz na regułę font-family oraz nazwę klasy, która ją ustawia. Klasy zaczynające się od elementor (np. elementor-kit) wskazują ustawienia globalne Elementora, a klasy z prefiksem motywu (np. ast przy Astrze) wskazują personalizację motywu. Wiesz wtedy dokładnie, w którym panelu szukać.
Naprawa w kolejności od eleganckiej do awaryjnej:
- Jedno źródło prawdy. Zdecyduj, gdzie definiujesz typografię (rekomenduję ustawienia globalne Elementora, jeśli na nim budujesz), i ustaw fonty w motywie na dziedziczenie lub te same wartości. Przejrzyj Wygląd → Dostosuj → typografia oraz ustawienia kreatora nagłówka motywu, bo tam lubią zostawać stare definicje.
- Nadpisanie CSS-em, gdy definicji nie można znaleźć. Bywa, że po starym foncie "nie ma śladu" w panelach, a on dalej się ładuje. Wtedy do Wygląd → Dostosuj → Dodatkowy CSS dodajesz regułę przypisującą właściwy font klasie z narzędzia Zbadaj, np. dla menu Astry: .ast-builder-menu-1 { font-family: "Poiret One", sans-serif; }. Jeśli reguła jest ignorowana, bo nadpisują ją ustawienia nadrzędne, dodaj !important przed średnikiem. Traktuj to jako plaster, nie lekarstwo: porządek w źródłach definicji jest trwalszy.
- Uwaga na cudzysłowy. Kopiując reguły CSS z dokumentów i czatów, pilnuj prostych cudzysłowów wokół nazwy fontu. Drukarskie (zakrzywione) psują regułę po cichu. Ten sam mechanizm opisywałam przy snippetach PHP w artykule o checkboxie zamówienia.
Typografia z AI: font zgodny z marką i z polszczyzną
Skoro naprawiamy fonty, zróbmy krok dalej: wybierzmy je mądrze. Dobór typografii to decyzja brandingowa, w której AI świetnie pełni rolę doradcy, o ile dostanie właściwe kryteria. Mój prompt:
Dobieram fonty dla marki: [opisz markę, wartości, grupę docelową, charakter: np. ekspercki ale ciepły]. Strona na WordPressie z Elementorem, język polski. Zaproponuj 3 zestawy typograficzne (font nagłówków + font tekstu) z Google Fonts, spełniające twarde warunki: pełna obsługa zestawu latin-ext, dobra czytelność tekstu ciągłego na ekranie, dostępne grubości 400 i 600 lub 700. Dla każdego zestawu: uzasadnienie dopasowania do marki, potencjalne ryzyka i z czym go nie łączyć. Na końcu wskaż, który zestaw wybrałbyś do marki edukacyjnej i dlaczego.
Twardy warunek latin-ext w prompcie to właśnie lekcja z tego artykułu: wpisany raz, eliminuje całą klasę przyszłych problemów. Propozycje zweryfikuj po swojemu: wpisz w podglądzie Google Fonts zdanie z pełnym kompletem polskich znaków (klasyczne "Zażółć gęślą jaźń" plus nazwa Twojej marki) i oceń na własne oczy. Spójny system typografii, kolorów i głosu marki, czyli fundament rozpoznawalności także w odpowiedziach AI, buduję z czytelniczkami krok po kroku w e-booku Metoda TOP AI.
Krok po kroku
- Ustal typ problemu: krzaczą się tylko polskie znaki (subset) czy całe bloki tekstu wyglądają inaczej (dwa fonty).
- Przy problemie z polskimi znakami pobierz font ponownie z zestawem latin-ext, podmień plik i wyczyść pamięć podręczną.
- Przy dwóch fontach kliknij element prawym przyciskiem, wybierz Zbadaj i odczytaj z klasy, czy definicja pochodzi z Elementora, czy z motywu.
- Ujednolić źródło prawdy typografii (globalne ustawienia Elementora), a definicje w motywie ustaw na dziedziczenie.
- W ostateczności nadpisz regułą w Dodatkowym CSS z prostymi cudzysłowami, ewentualnie z !important.
- Na przyszłość: fonty wybieraj z filtrem języka polskiego i testuj zdaniem "Zażółć gęślą jaźń" przed wdrożeniem.
