Domyślna czcionka zdradza witrynę na WordPressie na pierwszy rzut oka. Systemowa rodzina fontów krzyczy „niczego nie skonfigurowałem" głośniej niż jakikolwiek darmowy szablon.

Zmiana czcionki to kwestia dziesięciu minut. Nie trzeba być specjalistą od składu, nie trzeba płacić. Pięć opisanych poniżej sposobów obejmuje wszystko: od nowicjusza, który boi się dotknąć kodu, po właściciela witryny, który potrzebuje pełnej kontroli.

Zebraliśmy działające metody, aktualne na rok 2026. Od najgorszego, który wciąż jest polecany w starych poradnikach, po kanoniczną „ścieżkę WordPressa".

💡 Szybki przegląd:

• Proszę wybrać czcionkę: Google Fonts (bezpłatnie, ponad 1500 rodzin fontów), Adobe Fonts (w ramach subskrypcji Creative Cloud) lub proszę przesłać własny plik WOFF2 na serwer.
• Proszę zdecydować, czy potrzebna jest wtyczka (prościej, interfejs w dostosowywaniu) czy ręczne podłączenie przez functions.php (czyściej, szybciej, bez zależności od zewnętrznego kodu).
• W przypadku metody ręcznej: proszę dodać wp_enqueue_style w functions.php oraz font-family w CSS.
• W przypadku wtyczki: proszę zainstalować EasyFonts lub Use Any Font, wybrać rodzinę fontów i zapisać.
• Proszę sprawdzić wynik w różnych przeglądarkach i na urządzeniach mobilnych: każda dodatkowa czcionka dodaje 50-200 KB do ładowania strony.

Dlaczego w ogóle zmieniać czcionki na stronie

Czcionka kształtuje pierwsze wrażenie szybciej niż kolory czy obrazy. Badacze z Uniwersytetu Michigan już w 2008 roku wykazali: tekst złożony trudną czcionką jest podświadomie odbierany jako „ciężki". Czytelnik rzadziej zgadza się wykonywać instrukcje i przeszacowuje czas potrzebny na wykonanie zadania.

Z szeryfami czy bez, to również ma znaczenie. Kroje szeryfowe (Georgia, Merriweather) wydłużają czas czytania, ale zwiększają postrzeganie autorytetu. Czcionki bezszeryfowe (Roboto, Inter) przyspieszają czytanie i lepiej sprawdzają się na ekranach mobilnych. To nie są domysły: przegląd badań z psychologii typografii potwierdza ten efekt w praktyce.

W przypadku witryny na WordPressie odpowiednia czcionka rozwiązuje trzy zadania:

• Rozpoznawalność marki. Czcionka nagłówków jest unikalna, witryna nie wygląda jak „kolejny blog na standardowym szablonie".
• Czytelność. Właściwy rozmiar, wysokość wiersza i kontrast obniżają współczynnik odrzuceń.
• Hierarchia wizualna. Różne kroje dla nagłówków i tekstu głównego kierują wzrok odwiedzającego.

A teraz do praktyki.

Skąd brać czcionki dla WordPressa

Są trzy źródła: Google Fonts, Adobe Fonts i samodzielne przesyłanie. Omówmy każde z nich.

Google Fonts, bezpłatnie i bez rejestracji

Najbardziej oczywiste źródło. Ponad 1500 fontów, otwarta licencja, buforowanie przez CDN Google. Pasuje do 95% witryn.

Proszę wejść na fonts.google.com. Interfejs wita siatką kart z próbką każdej czcionki.

Po lewej stronie znajdują się filtry. Można wybierać według kategorii (Serif, Sans Serif, Display, Handwriting, Monospace), języka, liczby odmian i grubości. Filtry działają natychmiast, wynik przebudowuje się bez przeładowania.

Proszę najechać kursorem na czcionkę, pojawi się menu umożliwiające zmianę tekstu próbki. Proszę wpisać swój nagłówek lub akapit i zobaczyć, jak wygląda.

Proszę kliknąć „View specimen", otworzy się strona czcionki ze wszystkimi odmianami, tabelą glifów i próbkami w różnych rozmiarach.

Jeśli czcionka się spodoba, proszę nacisnąć czerwony plus w rogu karty. Czcionka trafi do panelu kolekcji na dole ekranu. Można dodać kilka rodzin: jedną do nagłówków, drugą do tekstu głównego.

Proszę rozwinąć panel kolekcji, zobaczą Państwo zakładki „Embed" i „Customize".

Na zakładce „Customize" proszę wybrać potrzebne odmiany. Ważne: nie należy zaznaczać wszystkiego po kolei. Każda odmiana to dodatkowy plik, który ładuje przeglądarka. Dla zwykłej witryny wystarczy Regular (400) i Bold (700), czasem Italic. Wskaźnik szybkości w prawym górnym rogu pokaże, jak bardzo czcionka spowolni ładowanie.

Jeśli strona jest w języku z alfabetem niełacińskim, proszę wybrać odpowiedni zestaw znaków na dole strony. Dla cyrylicy jest to Cyrillic.

Dwa przyciski ze strzałkami u góry: lewy, udostępnianie kolekcji, prawy, pobranie plików czcionki na komputer. Przyda się do Photoshopa lub jeśli zdecydują się Państwo hostować czcionkę samodzielnie.

Adobe Fonts (dawniej Typekit)

Jeśli mają Państwo subskrypcję Creative Cloud, Adobe Fonts zapewnia dostęp do profesjonalnych krojów pisma, takich jak Futura, Minion Pro i Myriad. Czcionki podłącza się przez CSS, podobnie jak Google Fonts. Bezpłatny plan Creative Cloud zawiera podstawowy zestaw, który dla większości projektów jest wystarczający.

Własne czcionki w WOFF2

Kupili Państwo licencjonowaną czcionkę lub pobrali wolną z Font Squirrel? Proszę ją przekonwertować do WOFF2 (nowoczesny format czcionki internetowej, kompresja Brotli, obsługiwany przez 97% przeglądarek) i wgrać na swój serwer. Plus: nie są Państwo zależni od zewnętrznego CDN i jest to zgodne z RODO. Minus: czcionka ładuje się z Państwa serwera, a ten jest z założenia wolniejszy niż Google CDN.

5 Sposobów na dodanie niestandardowych czcionek w WordPress

Sposobów jest dokładnie pięć. Przechodzimy od „tak nie należy robić" do idealnej metody WordPress.

Sposób 1: CSS @import, proszę tak nie robić

Google Fonts oferuje zakładkę @import z gotowym ciągiem CSS. Wygląda to wygodnie: kopiujesz, wklejasz, działa.

Technicznie kod wstawia się na początek pliku style.css motywu potomnego:

1
/*
2
 Theme Name: Twenty Seventeen Child
3
 Theme URI: https://wordpress.org/themes/twentyseventeen/
4
 Template: twentyseventeen
5
 Author: the WordPress team
6
 Author URI: https://wordpress.org/
7
 Version: 1.0
8
*/
9
 
10
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');
11
 
12
/* additional CSS goes here */

Dlaczego to najgorsza opcja? @import nie pozwala przeglądarce ładować kilku arkuszy stylów równolegle. Przeglądarka ładuje plik CSS, widzi wewnątrz @import i dopiero wtedy idzie po czcionkę. Ładowanie sekwencyjne zamiast równoległego, strata 200-400 ms na każdej czcionce. Na urządzeniach mobilnych jest to krytyczne.

Proszę nie używać @import do czcionek. W ogóle.

Sposób 2: wstawienie znacznika link w header.php

Biblioteki czcionek udostępniają znacznik <link> do wstawienia w <head>. Można go umieścić bezpośrednio w header.php, pliku szablonu, który znajduje się w każdym motywie WordPress.

Proszę umieścić <link> między znacznikami <head> i </head>. Jeśli pracują Państwo z motywem potomnym, proszę skopiować header.php z motywu nadrzędnego do potomnego i tam go edytować.

Metoda działa, ale jest krucha: aktualizacja motywu nadpisuje zmiany, jeśli nie używają Państwo motywu potomnego. Ponadto mieszanie treści i kodu w szablonie to zła praktyka. Do jednorazowego eksperymentu się nada, do stałego użytku, nie.

Sposób 3: @font-face i własny hosting czcionek

Jeśli czcionka znajduje się na Państwa serwerze, należy ją zadeklarować za pomocą dyrektywy @font-face w arkuszu stylów. Najpierw proszę przesłać pliki czcionek (WOFF2, WOFF) przez FTP do folderu motywu potomnego, na przykład wp-content/themes/yourtheme-child/fonts/.

Następnie proszę wpisać w style.css:

1
@font-face {
2
  font-family: 'Roboto';
3
  src: url('fonts/Roboto-Regular.woff2') format('woff2'),
4
       url('fonts/Roboto-Regular.woff') format('woff');
5
  font-weight: normal;
6
  font-style: normal;
7
  font-display: swap;
8
}

Parametr font-display: swap jest ważny: mówi przeglądarce, aby najpierw pokazała tekst czcionką systemową, a gdy niestandardowa się załaduje, podmieniła ją. Bez tego odwiedzający widzi pusty ekran, dopóki czcionka się ładuje.

Proszę nie zapomnieć zmienić nazwy czcionki i ścieżki. Jeśli plik źródłowy jest w formacie TTF lub OTF, proszę go przekonwertować na WOFF2 za pomocą konwertera online Font Squirrel.

Metoda daje pełną kontrolę, ale przegrywa z Google Fonts pod względem szybkości: Państwa serwer prawie na pewno jest wolniejszy niż CDN Google. Dla strony z ruchem do 10 000 osób miesięcznie różnica jest niezauważalna. Dla projektów o dużym obciążeniu, krytyczna.

Sposób 4: functions.php i wp_enqueue_style, kanoniczna ścieżka WordPress

Najwłaściwsza metoda z punktu widzenia architektury WordPress. Zamiast wstawiać kod w szablon, „ustawiają Państwo w kolejce" arkusz stylów z czcionką za pomocą haka wp_enqueue_scripts.

Kod dodaje się do pliku functions.php aktywnego motywu lub motywu potomnego. Oto działający przykład dla Google Fonts:

1
function techblog_add_google_fonts() {
2
    wp_enqueue_style(
3
        'techblog-google-fonts',
4
        'https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Playfair+Display:wght@700&display=swap',
5
        array(),
6
        null
7
    );
8
}
9
add_action( 'wp_enqueue_scripts', 'techblog_add_google_fonts' );

Funkcja wp_enqueue_style przyjmuje cztery parametry: unikalną nazwę (handle), URL arkusza stylów, tablicę zależności (tutaj pustą) i wersję (null, WordPress podstawi swoją). Hak wp_enqueue_scripts gwarantuje, że kod wykona się w odpowiednim momencie ładowania strony.

W przypadku czcionek Adobe używano wcześniej JavaScriptu i wp_enqueue_script. Obecnie Adobe Fonts przeszły na podejście CSS, analogiczne do Google Fonts, dlatego wp_enqueue_style obsługuje obie usługi.

Dlaczego to najlepszy ręczny sposób:

• Czcionki nie zostaną nadpisane podczas aktualizacji motywu (jeśli są Państwo w motywie potomnym).
• WordPress zarządza kolejnością ładowania i pozwala na zależności.
• Kod jest izolowany w functions.php, szablony pozostają czyste.
• Inne wtyczki mogą wyłączyć lub zmienić Państwa wywołanie za pomocą standardowych haków.

Sposób 5: wtyczka, jeśli nie chcą Państwo dotykać kodu

Nie są Państwo gotowi zaglądać do functions.php? Wtyczka rozwiąże problem bez ani jednej linii kodu.

Easy Google Fonts (przykład wizualny, ale nie dla stron produkcyjnych)

Najstarsza wtyczka do czcionek w katalogu WordPress. Daje interfejs w customizerze: wybierają Państwo czcionkę, widzą zmiany w czasie rzeczywistym, zapisują.

Instalacja jest standardowa: Wtyczki → Dodaj nową → wyszukiwanie „Easy Google Fonts" → Zainstaluj → Aktywuj.

Po aktywacji w sekcji Wygląd → Dostosuj pojawia się nowa pozycja „Typografia". Proszę w nią wejść, wybrać Typography Default, zobaczą Państwo elementy sterowania czcionkami dla akapitów i nagłówków.

Proszę kliknąć listę rozwijaną przy elemencie, który chcą Państwo zmienić. Rozwinie się menu:

Najważniejsze: Font Family. Dostępna jest tu cała biblioteka Google Fonts (ponad 600 krojów). Czcionki pogrupowano według kategorii: szeryfowe, bezszeryfowe, Display, Handwriting, Monospace. Można wyszukiwać po nazwie.

Proszę kliknąć czcionkę, zmiany są od razu widoczne w podglądzie po prawej stronie.

Następnie dostrajanie. Zakładka Font Weight/Style steruje grubością. Text Decoration dodaje podkreślenie, przekreślenie lub nadkreślenie. Text Transform przełącza wielkość liter: same wielkie, same małe lub kapitaliki.

W zakładce Appearance: kolor czcionki, kolor tła, rozmiar, wysokość wiersza i odstępy między literami.

Zakładka Positioning: marginesy, padding, obramowanie, promień obramowania i właściwość display.

Po zakończeniu proszę kliknąć Zapisz i opublikuj na górze.

Uczciwe ostrzeżenie: Easy Google Fonts nie był aktualizowany od 2020 roku. Na WordPress 6.4+ wtyczka może nie działać, część użytkowników skarży się, że pozycja „Typografia" nie pojawia się w kreatorze. Pokazujemy go jako ilustrację podejścia: większość wtyczek do czcionek działa przez ten sam mechanizm kreatora.

Co zrobić, gdy czcionka się nie zmienia

Niektóre motywy używają niestandardowych selektorów CSS. Nagłówek może być nie tylko <h1>, ale <h1 class="entry-title"> i wtyczka „nie widzi" takiego elementu.

Rozwiązanie: proszę utworzyć własną kontrolkę czcionki w Ustawienia → Google Fonts.

Proszę przypisać odpowiedni selektor CSS do nowej kontrolki i włączyć wymuszone nadpisywanie. Po zapisaniu kontrolka pojawi się w kreatorze obok standardowych.

Alternatywne wtyczki (aktualne w 2026)

Easy Google Fonts to nie jedyna opcja. Trzy aktywne alternatywy:

• EasyFonts, hostuje Google Fonts lokalnie na Państwa serwerze. Automatycznie wykrywa używane czcionki, pobiera je i serwuje z Państwa domeny. Szybciej niż zapytania do Google CDN, plus pełna zgodność z RODO. Najlżejsza z tych trzech pod względem wpływu na wydajność.
• Use Any Font, wgrywają Państwo swoje czcionki bez CSS. Wtyczka konwertuje TTF/OTF/WOFF do formatu webowego i umieszcza na Państwa serwerze. Nadaje się do komercyjnych czcionek zakupionych na licencji.
• Fonts Plugin, alternatywny menedżer Google Fonts z podglądem w kreatorze. W przeciwieństwie do przestarzałego Easy Google Fonts jest regularnie aktualizowany i testowany z aktualnymi wersjami WordPress.

Stosujemy czcionkę do elementów witryny

Czcionka jest podłączona, ale na razie „wisi w powietrzu". Trzeba powiedzieć przeglądarce, do których elementów ma ją zastosować.

Oto podstawowy CSS do podmiany czcionki nagłówków. Proszę dodać go przez Wygląd → Dostosuj → Dodatkowy CSS:

1
h1,
2
h2,
3
h3,
4
h4,
5
h5,
6
h6 {
7
    font-family: 'Roboto', sans-serif;
8
}

Dla tekstu podstawowego:

1
body,
2
p,
3
li {
4
    font-family: 'Inter', sans-serif;
5
}

Ważny niuans: nazwa czcionki w font-family musi dokładnie odpowiadać tej, którą deklaruje biblioteka. Google Fonts używa 'Roboto', natomiast Adobe Fonts może zwracać 'open-sans' (bez spacji i cudzysłowów). Proszę uważnie patrzeć na kod dostarczany przez serwis, a nie na nazwę czcionki widoczną na stronie.

Ten CSS można dodać na trzy sposoby: przez konfigurator (najprostszy, odporny na aktualizacje szablonu), przez style.css szablonu potomnego lub przez hook wp_head. Zalecamy pierwszy z nich.

⁉️🤔 Najczęściej zadawane pytania

Ile krojów pisma można podłączyć do strony bez utraty szybkości?

Optymalnie dwie rodziny: jedna do nagłówków, jedna do tekstu głównego. Każdy dodatkowy krój dodaje zapytanie HTTP i 50-200 KB wagi strony. Trzy kroje to już sufit. I podłączaj Pan/Pani tylko potrzebne odmiany: Regular (400) i Bold (700) ważą dwa razy mniej niż zestaw 5-6 odmian.

Google Fonts czy Adobe Fonts, co wybrać?

Dla 9 na 10 stron, Google Fonts. Bezpłatnie, szybko (CDN Google), ponad 1500 krojów, cyrylica jest w prawie wszystkich popularnych rodzinach. Adobe Fonts ma sens, jeśli ma Pan/Pani już opłaconą subskrypcję Creative Cloud i potrzebuje konkretnego komercyjnego kroju, takiego jak Futura lub Minion Pro.

Czy można użyć pobranego pliku TTF z komputera?

Można, ale najpierw proszę przekonwertować do WOFF2 (nowoczesny skompresowany format dla sieci). Pliki TTF nie są skompresowane i zajmują zauważalnie więcej miejsca. WOFF2 z kompresją Brotli zmniejsza objętość pliku kilkukrotnie. Konwerter: Font Squirrel Webfont Generator.

Wtyczka czy functions.php, co jest pewniejsze?

functions.php jest pewniejszy do długotrwałej pracy: nie ma zbędnej zależności, kod jest przejrzysty, aktualizacje wtyczki Pana/Pani nie dotyczą. Wtyczka wygrywa wygodą: 5 minut zamiast pół godziny na naukę hooków. Dla strony produkcyjnej proszę wybrać wp_enqueue_style w motywie potomnym. Dla szybkiego prototypu lub strony klienta, który potrzebuje prostego interfejsu, wtyczka.

Dlaczego krój na urządzeniu mobilnym wygląda inaczej niż na desktopie?

Przeglądarki mobilne czasami podmieniają krój systemowy lub inaczej renderują wygładzanie. Do tego dochodzą inne rozmiary ekranu: 16px na desktopie czyta się normalnie, a na telefonie może być za duże. Rozwiązanie: proszę ustawić rozmiar względny przez clamp() (na przykład font-size: clamp(16px, 2.5vw, 20px)) i sprawdzić na rzeczywistym urządzeniu, a nie w emulatorze.

Podsumowanie: co wdrażać na stronę w 2026

Jeśli podsumować wszystko w pięciu zdaniach:

• Google Fonts, domyślne źródło krojów pisma. Wystarcza dla 95% projektów: szybko, bezpłatnie, cyrylica jest wszędzie.
• functions.php + wp_enqueue_style, najlepsza metoda ręczna. Czysto, aktualizacje motywu nie są straszne, kod przejrzysty.
• Wtyczka EasyFonts, jeśli chce Pan/Pani lokalny hosting Google Fonts bez zamieszania z kodem. Szybciej niż standardowy CDN i zgodnie z RODO.
• Dwie odmiany na krój, nie więcej, Regular i Bold. Każdy dodatkowy wariant kradnie 30-50 KB ładowania.
• WOFF2, nie TTF, proszę konwertować przed wgraniem na serwer. Oszczędność pół megabajta na stronie.

Wymiana krojów pisma to jedno z tych zadań, gdzie godzina uważnej konfiguracji daje lata wizualnych korzyści. Proszę zacząć teraz: wejść na stronę Google Fonts, znaleźć parę rodzin do swojego projektu i wypróbować sposób 4 z powyższej listy.