Roboto w nagłówkach, Open Sans w tekście. Typografia strony wygląda jak w połowie instalacji WordPressa. Odwiedzający zauważył szablon, rozpoznał font, a strona straciła część indywidualności jeszcze przed pierwszym akapitem.

Niestandardowy font podłącza się do WordPressa na dwa sposoby: przez wtyczkę w 2 minuty bez ani jednej linii kodu lub ręcznie przez @font-face z pełną kontrolą nad plikami. Oba działają niezawodnie, wybór zależy od Pana/Pani doświadczenia z CSS.

Poniżej omówimy, skąd brać fonty, jak skonfigurować wtyczkę i jak zapisać @font-face w motywie potomnym. Kod pochodzi z działających instalacji: proszę wkleić, zamienić nazwę pliku i typografia jest gotowa.

💡 Szybki przegląd:

• Proszę pobrać font z DaFont lub FontSquirrel w formacie WOFF2 lub TTF: co najmniej trzy odmiany (zwykła, pogrubiona, kursywa).
• Proszę zainstalować Use Any Font lub Fonts Plugin, przesłać plik przez panel administracyjny i przypisać font do elementów. Kod nie jest potrzebny.
• Lub podłączyć ręcznie: proszę utworzyć folder fonts w motywie potomnym, przesłać pliki przez FTP i zapisać @font-face w style.css dla każdej odmiany.
• Proszę sprawdzić wyświetlanie w kilku przeglądarkach i nie stosować więcej niż dwóch niestandardowych fontów: każdy plik zwiększa wagę strony.

Skąd brać fonty i w jakim formacie

Google Fonts znają wszyscy, właśnie dlatego są wszędzie. Jeśli potrzebuje Pan/Pani czegoś mniej ogranego, oto trzy sprawdzone źródła.

DaFont oferuje ponad 3 500 fontów z kategoriami od komiksów po vintage. Większość jest bezpłatna do użytku osobistego. W przypadku projektu komercyjnego proszę sprawdzać licencję każdego pliku osobno, są one podane na stronie fontu.

FontSquirrel koncentruje się na bezpłatnych fontach z licencją komercyjną. Kolekcja jest niewielka, za to każdy font został sprawdzony przez prawników. Wbudowany generator konwertuje przesłany plik do WOFF i WOFF2 jednym kliknięciem.

FontSpring sprzedaje płatne fonty, ale prawie w każdej rodzinie jest jedna-dwie bezpłatne odmiany. Przed pobraniem proszę uważnie przeczytać licencję: różne odmiany mogą mieć różne warunki.

Ogólna zasada: nie proszę umieszczać na stronie więcej niż dwóch niestandardowych fontów. Jeden do nagłówków, drugi do tekstu głównego, to wystarczy. Każdy plik dodaje zapytanie HTTP i zwiększa wagę strony o 30-100 KB.

Proszę pobierać wszystkie odmiany od razu: zwykłą, pogrubioną, kursywę i pogrubioną kursywę. Jeśli plik ma tylko jedną odmianę, przeglądarka będzie imitować bold i italic sztucznym pogrubieniem, rezultat wygląda topornie.

Sposób 1: wtyczka w 2 minuty

Wtyczka, najprostsza droga. Instaluje Pan/Pani, przesyła plik fontu, wybiera, gdzie zastosować. Żadnego kodu, żadnych połączeń FTP.

Use Any Font

🔗 Use Any Font na WordPress.org

🔗 Zrzuty ekranu i demo

Przesyła czcionki w formatach TTF, OTF i WOFF, automatycznie konwertuje do WOFF2 z kompresją Brotli. Według danych ze strony wtyczki na WordPress.org przesyłanie przyspiesza o około 30%. Czcionki są przechowywane na Pana serwerze: zgodność z RODO od razu po instalacji, bez zależności od zewnętrznych API po konwersji.

Po instalacji otrzymuje Pan klucz API (bezpłatny klucz Lite umożliwia jedną konwersję), przesyła plik i przypisuje czcionkę przez interfejs wizualny. Można ją zastosować do nagłówków, akapitów lub konkretnych bloków bezpośrednio z panelu administracyjnego.

Obsługuje integrację z Elementorem, Divi, WPBakery, Gutenbergiem: przypisuje Pan czcionkę raz we wtyczce, a pojawia się ona na liście czcionek buildera.

Proszę zwrócić uwagę: do obsługi wielu czcionek potrzebny jest klucz Premium. Dla typowej strony wersja bezpłatna jest wystarczająca: jedna firmowa czcionka do nagłówków, Google Fonts do tekstu.

Fonts Plugin

🔗 Fonts Plugin na WordPress.org

🔗 Zrzuty ekranu wtyczki

Dawniej Olympus Google Fonts: nazwa została zmieniona, funkcjonalność rozszerzona. Według danych ze strony wtyczki ma ona ponad 200 000 aktywnych instalacji i ocenę 5 gwiazdek od ponad 1 200 użytkowników. Obsługuje Google Fonts, Adobe Fonts (Typekit) i przesyłanie własnych plików.

Konfiguracja odbywa się przez customizer: wybiera Pan czcionkę, widzi podgląd w czasie rzeczywistym, zapisuje.

Wersja Pro dodaje lokalny hosting Google Fonts pod kątem RODO, selektywne ładowanie tylko potrzebnych odmian oraz zarządzanie stopniem pisma, kolorem i interlinii. Wersja bezpłatna jest wystarczająca dla większości stron.

Wtyczka czy ręcznie: kiedy co wybrać

Wtyczka wygrywa szybkością: instalacja w 2 minuty, kod nie jest potrzebny. Jest Pan jednak zależny od aktualizacji wtyczki i jej kompatybilności z wersją WordPressa.

Ręczna instalacja przez @font-face jest trudniejsza w konfiguracji, za to kontroluje Pan każdy bajt. Żadnych zewnętrznych API, żadnych aktualizacji psujących typografię.

Jeśli już pracują Państwo z motywem potomnym, metoda ręczna w naturalny sposób wpasuje się w Państwa CSS. Czcionki staną się częścią motywu i pozostaną tam na lata.

Sposób 2: ręczne dodawanie przez @font-face

Dyrektywa @font-face łączy pliki czcionek bezpośrednio z Pana/Pani serwera. Obsługiwane są formaty TTF, OTF, WOFF, WOFF2 oraz SVG. Dla każdego kroju potrzebny jest osobny blok kodu.

Za to po skonfigurowaniu zapomina Pan/Pani o typografii na lata: aktualizacje WordPressa i motywu nie naruszą czcionek, leżą one w motywie potomnym i ładują się za każdym razem jako część CSS.

Przed rozpoczęciem proszę utworzyć motyw potomny: wszystkie zmiany wprowadza się do niego, główny motyw pozostaje nietknięty i będzie się aktualizował bez utraty Pana/Pani poprawek.

Krok 1: proszę utworzyć folder na czcionki

W folderze motywu potomnego proszę utworzyć katalog fonts. Proszę dodać go przez FTP lub menedżera plików hostingu:

1
wp-content/themes/your-child-theme/fonts/

Jeśli Pana/Pani motyw potomny nazywa się twentytwentyfour-child, ścieżka będzie następująca: wp-content/themes/twentytwentyfour-child/fonts/.

Krok 2: proszę wgrać pliki czcionek na serwer

Proszę skopiować pobrane pliki do folderu fonts przez FTP lub menedżera plików hostingu. Dla każdego kroju osobny plik:

1
fonts/WebFont.woff2
2
fonts/WebFont.woff
3
fonts/WebFont-Bold.woff2
4
fonts/WebFont-Bold.woff
5
fonts/WebFont-Italic.woff2
6
fonts/WebFont-Italic.woff

W praktyce wystarczą formaty WOFF i WOFF2: pokrywają wszystkie nowoczesne przeglądarki i ważą mniej niż TTF. Według MDN Web Docs, WOFF2 kompresuje czcionkę o 30% skuteczniej niż WOFF i jest obsługiwany przez wszystkie przeglądarki od 2016 roku.

Przeglądarka sama wybierze odpowiedni format z podłączonych: jeśli obsługuje WOFF2, załaduje go, jeśli nie, weźmie WOFF.

Krok 3: proszę zdefiniować @font-face w style.css

Proszę otworzyć style.css motywu potomnego i dodać kod po nagłówku motywu (komentarzu z nazwą i opisem motywu). Proszę zacząć od zwykłego kroju:

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

font-family, nazwa czcionki, której będzie Pan/Pani używać w CSS. Proszę nazywać tak, by nie pomylić z systemowymi: nie Arial, a MyBrandSans lub BrandHeading. src, ścieżka do plików względem style.css. Kolejność jest ważna: WOFF2 jako pierwszy (najlżejszy), WOFF jako drugi (fallback dla starszych przeglądarek).

Krok 4: proszę dodać kursywę

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont-Italic.woff2') format('woff2'),
4
         url('fonts/WebFont-Italic.woff') format('woff');
5
    font-weight: normal;
6
    font-style: italic;
7
}

Proszę zwrócić uwagę: font-family ta sama, font-weight pozostaje normal, a font-style zmienia się na italic. Przeglądarka sama podstawi odpowiedni plik dla znacznika em i właściwości font-style: italic.

Krok 5: proszę dodać krój pogrubiony

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont-Bold.woff2') format('woff2'),
4
         url('fonts/WebFont-Bold.woff') format('woff');
5
    font-weight: bold;
6
    font-style: normal;
7
}

Tutaj font-style znów normal, a font-weight już bold. Teraz znacznik strong i właściwość font-weight: bold będą wyświetlane Pana/Pani plikiem pogrubionym, a nie przeglądarkową imitacją pogrubienia. Różnica jest zauważalna: prawdziwy krój pogrubiony jest zbalansowany przez projektanta czcionki, imitacja wygląda topornie.

Krok 6: pogrubiona kursywa (opcjonalnie)

1
@font-face {
2
    font-family: 'MyWebFont';
3
    src: url('fonts/WebFont-BoldItalic.woff2') format('woff2'),
4
         url('fonts/WebFont-BoldItalic.woff') format('woff');
5
    font-weight: bold;
6
    font-style: italic;
7
}

Cztery kroje pokrywają praktycznie wszystkie zadania typograficzne zwykłej strony. Jeśli projekt nie wymaga pogrubionej kursywy, proszę pominąć ten krok: plik nie będzie się ładował, dopóki CSS jawnie nie zażąda połączenia bold + italic.

Krok 7: proszę zastosować czcionkę do elementów

Po @font-face proszę dodać reguły, które przypiszą czcionkę konkretnym elementom. Proszę dodać w style.css motywu potomnego:

1
body {
2
    font-family: 'MyWebFont', Arial, sans-serif;
3
}
4
 
5
h1, h2, h3 {
6
    font-family: 'MyWebFont', Georgia, serif;
7
}

Pierwsza reguła: Pana/Pani czcionka dla tekstu głównego, z fallbackiem na systemowy Arial. Druga: ta sama czcionka dla nagłówków, z fallbackiem na Georgia.

Jeśli plik czcionki nie załaduje się (serwer padł lub ścieżka jest nieprawidłowa), strona nie zostanie bez tekstu: przeglądarka pokaże Arial lub Georgia. Fallback jest obowiązkowy: bez niego przeglądarka podstawi domyślną czcionkę systemową, zwykle Times New Roman, i typografia się rozsypie.

Gotowe. Niestandardowa czcionka jest podłączona bez wtyczek i zewnętrznych serwisów. Typografia żyje na Pana/Pani serwerze i nie zepsuje się, jeśli zewnętrzne API zmieni warunki lub padnie.

Wideo: konfiguracja krok po kroku na działającej stronie

Proszę zobaczyć, jak cały proces wygląda na rzeczywistej stronie WordPress od wyboru czcionki do zastosowania jej w nagłówkach:

W filmie pokazano oba sposoby: przez wtyczkę i przez @font-face. Warto zatrzymać wideo i powtarzać czynności za autorem. Film jest po angielsku, ale proces jest wizualnie zrozumiały również bez dźwięku.

⁉️🤔 Często zadawane pytania

Ile niestandardowych fontów można dodać do witryny?

Nie więcej niż dwa: jeden do nagłówków, drugi do tekstu głównego. Każdy font wymaga kilku plików odmian, od 30 do 100 KB każdy. Dwa fonty dodadzą odczuwalną objętość do ładowania strony. Trzeci wyraźnie pogorszy szybkość, szczególnie na wolnym połączeniu mobilnym.

Czy do użycia @font-face konieczne jest tworzenie motywu potomnego?

Formalnie nie: można wstawić @font-face bezpośrednio w style.css głównego motywu. Jednak po najbliższej aktualizacji motywu wszystkie zmiany znikną. Motyw potomny rozwiązuje ten problem raz na zawsze. Jeśli jeszcze go Pan/Pani nie utworzył(a), nasz poradnik o motywach potomnych WordPress przeprowadzi od instalacji do pierwszego rezultatu.

Jaki format pliku wybrać: WOFF, WOFF2 czy TTF?

WOFF2, priorytetowo. Kompresuje font zauważalnie silniej niż WOFF i jest obsługiwany przez wszystkie nowoczesne przeglądarki. WOFF, wariant zapasowy dla starszych wersji przeglądarek. TTF i OTF proszę podłączać tylko wtedy, gdy font nie jest dostępny w formatach webowych: nie są skompresowane i ważą dwukrotnie więcej. Kolejność w src zawsze: WOFF2, potem WOFF.

Dlaczego font nie wyświetla się po instalacji?

Trzy częste przyczyny. Pierwsza: ścieżka do pliku w url() jest nieprawidłowa, proszę sprawdzić, czy ścieżka jest budowana od style.css, a nie od katalogu głównego witryny. Druga: pamięć podręczna przeglądarki przechowuje stary CSS, proszę otworzyć witrynę w trybie incognito lub wyczyścić pamięć podręczną kombinacją Ctrl+F5. Trzecia: konflikt z motywem, który nadpisuje font-family z wyższym priorytetem, proszę sprawdzić w inspektorze, który selektor CSS jest faktycznie stosowany do tekstu.

Czy trzeba podawać format() w src?

Formalnie przeglądarka sama określa format na podstawie nagłówków pliku. Jednak jawne format('woff2') przyspiesza wybór: przeglądarka nie ładuje pliku, którego świadomie nie obsługuje. Dlatego zawsze proszę podawać. To zalecenie specyfikacji CSS Fonts Level 4.

Jak sprawdzić, czy font ładuje się z mojego serwera, a nie z zewnątrz?

Proszę otworzyć DevTools (F12), zakładka Network, filtr Fonts, odświeżyć stronę. Na liście powinny znajdować się wyłącznie pliki z Pana/Pani domeny. Jeśli widzi Pan/Pani fonts.googleapis.com lub fonts.gstatic.com, Google Fonts ładują się zewnętrznie. Dla zgodności z RODO proszę przenieść je na hosting lokalny przez Fonts Plugin Pro lub pobrać ręcznie i podłączyć przez @font-face.

Który sposób podłączenia fontów wybrać?

Obie metody działają niezawodnie. Wybór zależy od tego, co jest dla Pana/Pani ważniejsze: szybkość konfiguracji czy kontrola nad każdym bajtem.

Jeśli podłącza Pan/Pani font po raz pierwszy i nie chce zaglądać do kodu, proszę wybrać Use Any Font. Wgrał(a) Pan/Pani plik, przypisał(a) do nagłówków, gotowe. Darmowa wersja wystarcza na jeden firmowy font do nagłówków.

Jeśli potrzebuje Pan/Pani dostępu do katalogu Google Fonts z podglądem na żywo bezpośrednio w customizerze, proszę wybrać Fonts Plugin. Darmowa wersja wystarcza do większości zadań, Pro jest potrzebne tylko do lokalnego hostingu Google Fonts zgodnego z RODO.

Jeśli pracuje już Pan/Pani z motywem potomnym i przywykł(a) Pan/Pani do ręcznej edycji CSS, proszę wybrać @font-face. Zero zewnętrznych zależności, pełna kontrola, a po skonfigurowaniu nie pamięta się o typografii latami. Aktualizacje motywu nie naruszą fontów, żyją one w Pana/Pani motywie potomnym jako część CSS.

Proszę zacząć od wtyczki: to 2 minuty i żadnego ryzyka. A jaki font jest obecnie na Pana/Pani witrynie, standardowy z motywu czy podłączył(a) już Pan/Pani własny?