Czcionki Google w WordPressie: jak je dodać, skonfigurować i przyspieszyć ładowanie

Źródło aktywnej czcionki sprawdzisz w narzędziach deweloperskich przeglądarki, porównując regułę CSS z żądaniami plików fontu. Otwórz stronę, kliknij tekst prawym przyciskiem i wybierz "Zbadaj". W panelu Computed sprawdź `font-family`, a w Network ustaw filtr Font, by zobaczyć pobierane pliki, ich status oraz domenę źródłową.

Przed dodaniem kolejnej integracji sprawdź cztery miejsca, w których może być ustawiona typografia:
- Wygląd > Dostosuj lub panel motywu w motywie klasycznym.
- Wygląd > Edytor > Style w motywie blokowym.
- Globalne ustawienia typografii kreatora, na przykład Elementora.
- Aktywne wtyczki fontów i optymalizacji oraz kod dodany do nagłówka strony.

Wartość `font-family` pokazuje kolejność preferowanych krojów, ale sama nie potwierdza, że font został pobrany. Sprawdź w Network, czy witryna żąda pliku z Google Fonts lub własnego serwera. Kilka żądań dla tej samej rodziny zwykle oznacza, że motyw, kreator albo wtyczka ładują ją równolegle.

Porównanie WordPressa z innymi systemami CMS przydaje się, gdy zakres kontroli nad motywem i typografią jest częścią decyzji o systemie dla witryny.

Ustawienia typografii motywu pozwalają zmienić font bez kodu, jeśli producent udostępnia wybór rodziny i grubości. W motywie klasycznym otwórz Wygląd > Dostosuj i poszukaj sekcji Typografia, Globalne lub Fonty. W panelach producentów nazwy i położenie opcji mogą się różnić, dlatego po zapisaniu sprawdź ustawienia tekstu podstawowego, nagłówków i przycisków.

Wybierz tylko te grubości, których używa projekt. Jeśli treść korzysta z Regular, a nagłówki z Bold, nie ładuj dodatkowych odmian kursywnych i pośrednich bez potrzeby. Po publikacji obejrzyj stronę główną, wpis, archiwum i formularz, ponieważ motyw może nadawać tym elementom osobne style.

Jeśli witryna wymaga zmian typografii razem z poprawkami motywu lub wtyczek, opieka nad stroną WordPress obejmuje ustalony zakres bieżącego utrzymania.

W motywie blokowym globalną typografię ustawisz w Wygląd > Edytor > Style > Typografia, jeśli motyw udostępnia wybór rodzin i odmian. Wybierz element, na przykład tekst lub nagłówki, i przypisz mu zainstalowany krój. Dokumentacja WordPress opisuje też Bibliotekę fontów: w WordPressie 7.0 znajduje się ona w Wygląd > Czcionki i działa dla motywów blokowych oraz klasycznych.

Biblioteka fontów pozwala wyszukać i zainstalować Google Fonts, wybrać potrzebne warianty, zarządzać nimi, a także wgrywać własne pliki fontów. Zainstalowane pliki są hostowane w witrynie, a dostępne warianty pojawiają się w ustawieniach stylów. Po instalacji przejdź do Wygląd > Edytor > Style i przypisz font do tekstu lub konkretnych bloków.

W kreatorze takim jak Elementor zacznij od globalnej typografii, a nie od ustawień każdego widżetu. Wyjątki ustawiaj na pojedynczych elementach tylko wtedy, gdy rzeczywiście potrzebują innego kroju. Dokumentacja motywu i kreatora określa dostępne opcje, więc ścieżka może zależeć od ich wersji.

CSS może zarówno załadować font, jak i przypisać go elementom, ale sama deklaracja `font-family` nie pobiera pliku. Najpierw sprawdź, czy Biblioteka fontów lub motyw nie udostępnia już wybranej rodziny. Własne reguły umieść w Wygląd > Dostosuj > Dodatkowy CSS albo w arkuszu motywu potomnego; nie edytuj bezpośrednio plików motywu, bo aktualizacja może nadpisać zmiany.

Dla fontu hostowanego przez Google dodaj na początku pola CSS import jednej rodziny i wymaganej grubości, a następnie reguły typografii. Przykład ładuje Roboto w grubości 400 i 700:

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

h1, h2, h3 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
}

Import umieszczaj przed pozostałymi regułami CSS. Jeśli serwer lub wtyczka optymalizująca usuwa `@import`, załaduj arkusz metodą obsługiwaną przez motyw albo użyj Biblioteki fontów w WordPressie 7.0. Dokumentacja Google Fonts zaleca precyzyjnie wskazywać potrzebne rodziny i style.

Dla lokalnego pliku WOFF2 zapisz font w katalogu motywu potomnego, na przykład `wp-content/themes/nazwa-child/fonts/`, a następnie podaj rzeczywistą ścieżkę w `src`:

@font-face {
  font-family: 'Roboto';
  src: url('/wp-content/themes/nazwa-child/fonts/roboto-regular.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

body {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
}

Podmień ścieżkę i nazwę pliku na zgodne z własną witryną. Dla kolejnych grubości dodaj osobną regułę `@font-face`, ustawiając odpowiednie `font-weight` i plik. Upewnij się, że plik obejmuje polskie znaki.

Najpierw wybierz funkcję motywu lub Biblioteki fontów, a CSS stosuj wtedy, gdy potrzebujesz precyzyjnej kontroli nad ładowaniem.

Lokalne ładowanie daje kontrolę nad plikami i ogranicza zależność od zewnętrznego serwera, a bezpośrednie Google Fonts upraszcza konfigurację. Żadna metoda nie gwarantuje krótszego czasu ładowania, ponieważ wynik zależy także od liczby odmian, cache, konfiguracji serwera i innych zasobów strony. WordPress 7.0 umożliwia instalację fontów Google przez Bibliotekę fontów i hostowanie ich plików w witrynie.

Wybierz ładowanie lokalne, gdy chcesz samodzielnie zarządzać plikami i ich wersjami. W obu wariantach sprawdź żądania i wydajność gotowej strony.

Mniejsza liczba rodzin i odmian oznacza mniej plików fontu do pobrania. Usuń nieużywane style i zamów tylko potrzebne grubości; Google Fonts CSS API pozwala określić konkretne warianty w adresie arkusza. `font-display: swap` pokazuje tekst krojem zastępczym, gdy właściwy plik jeszcze się ładuje.

Preload stosuj tylko dla pliku potrzebnego do wyrenderowania pierwszego widoku. Wstępne pobieranie kilku odmian może konkurować o zasoby z innymi elementami. Po zmianie porównaj zachowanie tekstu i przesunięcia układu w Lighthouse albo PageSpeed Insights, wykonując pomiary na tej samej stronie przed zmianą i po niej.

Jeśli typografia wymaga diagnozy razem z aktualizacją lub konfliktem motywu, pomoc w utrzymaniu WordPressa może objąć uzgodnione testy po wprowadzeniu zmian.

Test fontu powinien objąć telefon, komputer, polskie znaki, formularze i sytuację, w której plik nie zostanie pobrany. Otwórz stronę w widoku mobilnym i desktopowym, sprawdź nagłówek, akapit, przycisk, menu oraz pole formularza. Wpisz ąćęłńóśźż i ich wielkie odpowiedniki, ponieważ niektóre pliki lub podzbiory nie zawierają pełnego zestawu znaków.

Lista kontroli po wdrożeniu:
- W Network plik fontu ma status 200, a konsola nie pokazuje błędu ładowania ani CORS.
- Tekst pozostaje czytelny, gdy przeglądarka używa kroju zastępczego.
- Nagłówki, przyciski, formularze i menu stosują zamierzoną rodzinę.
- Wydruk zachowuje czytelny krój i układ.
- W mobilnym widoku nie pojawia się poziome przewijanie ani nieoczekiwane zawijanie nagłówków.

Status 404 wskazuje zwykle błędną ścieżkę lub nazwę pliku. Błąd CORS oznacza problem z dostępem przeglądarki do fontu z innej domeny; sprawdź wtedy konfigurację serwera i domenę podaną w żądaniu.

Podwójne ładowanie tej samej rodziny to częsty skutek równoległych ustawień motywu, kreatora i wtyczki. Objawem są powielone żądania w Network albo różne kroje w nagłówkach i treści. Pozostaw jeden komponent odpowiedzialny za pobranie fontu i usuń zbędne integracje.

Inne problemy można rozpoznać po objawie:
- Brak polskich znaków wskazuje na plik lub podzbiór bez wymaganych glifów.
- Inny font na części strony może wynikać z bardziej szczegółowej reguły kreatora.
- Błąd 404 wskazuje nieprawidłową ścieżkę do lokalnego pliku.
- Późna podmiana kroju może wynikać z opóźnionego pobrania i braku właściwego `font-display`.

Perspektywa KC Mobile. Z naszych wdrożeń wynika, że zmiana typografii przebiega stabilniej, gdy najpierw mapujemy źródła fontów, a dopiero potem zmieniamy style globalne. Ogranicza to ryzyko dołożenia nowego żądania do konfiguracji, która już pobiera tę samą rodzinę.

Po zmianie globalnego fontu sprawdź także elementy poboczne, na przykład widżety i sidebar WordPressa, które mogą mieć własne reguły typografii.

• Skąd pobierać motywy WordPressa i jak bezpiecznie je instalować
• AMP for WordPress: konfiguracja, testy i decyzja o wdrożeniu
• Jak dodać skrypt JavaScript do WordPressa, by działał poprawnie i nie utrudniał aktualizacji?
• Motywy WordPress do Elementora: jak wybrać zgodny motyw