Przetestowali Państwo stronę przez GTmetrix i zobaczyli błędy Google Fonts? Znajoma sytuacja. Zewnętrzne zapytania do fonts.googleapis.com spowalniają ładowanie, a wtyczki do cache'owania, takie jak WP Rocket czy WP Fastest Cache, nie mogą skompresować tego, co leży na cudzym serwerze.

Od 2022 roku doszedł jeszcze jeden powód: niemiecki sąd uznał dynamiczne ładowanie Google Fonts za naruszenie RODO, adres IP odwiedzającego jest przekazywany na serwery Google w USA bez zgody. Lokalny hosting fontów rozwiązuje trzy zadania jednocześnie: szybkość w GTmetrix, zgodność z RODO i pełną kontrolę nad cache'owaniem.

Poniżej instrukcja krok po kroku. Od wyboru fontu w Google Fonts do czystego raportu GTmetrix bez żadnego błędu zasobów zewnętrznych.

💡 Szybki przegląd:

• Proszę pobrać potrzebne odmiany fontu z Google Fonts
• Proszę przekonwertować.ttf na WOFF2 przez Transfonter lub google-webfonts-helper
• Proszę wgrać pliki do /wp-content/uploads/fonts/ przez FTP
• Proszę zdefiniować @font-face w CSS motywu i sprawdzić wyświetlanie
• Proszę ponownie przetestować stronę w GTmetrix, błędy Google Fonts powinny zniknąć

Dlaczego w ogóle warto ładować fonty lokalnie

Gdy przeglądarka ładuje stronę, idzie na fonts.googleapis.com, pobiera CSS, a potem ciągnie same pliki fontów z fonts.gstatic.com. To co najmniej dwa zewnętrzne zapytania DNS i dwie sesje HTTP, na które nie mają Państwo wpływu. Wtyczka do cache'owania jest bezsilna: nie da się skompresować ani opóźnić ładowania cudzego zasobu.

Lokalne ładowanie zmienia obraz sytuacji. Pliki fontów leżą na Państwa serwerze, ta sama domena, ten sam CDN, to samo cache'owanie. Przeglądarka nie wychodzi na zewnątrz, a GTmetrix i PageSpeed Insights przestają narzekać na zasoby zewnętrzne.

I tak, RODO. W styczniu 2022 roku sąd krajowy w Monachium orzekł: dynamiczne ładowanie Google Fonts bez zgody użytkownika narusza RODO. Po tym fala pozwów przetoczyła się przez Europę, a właściciele stron masowo przeszli na lokalny hosting. Hostowanie fontów u siebie to najpewniejsze rozwiązanie.

Krok 1. Proszę wybrać font w Google Fonts

Wchodzimy na Google Fonts i znajdujemy potrzebny font. W tym poradniku używam Roboto, jednego z najpopularniejszych fontów w sieci, ze wsparciem dla cyrylicy.

Dwie zasady oszczędności:

• Minimum odmian. Każda odmiana (regular, bold, italic) to osobny plik i osobne zapytanie. Jeśli w projekcie używane są tylko regular i bold, proszę odznaczyć pozostałe.
• Minimum fontów. Jeden, dwa fonty na stronę. Trzeci to już przesada dla szybkości, choćby był nie wiadomo jak ładny.

Wybrałem Roboto Regular (400) i Roboto Bold (700). To wszystko.

Krok 2. Proszę pobrać font

Na stronie fontu klikamy przycisk „Download family". Google spakuje wszystkie odmiany do archiwum ZIP. Na tym etapie wybór odmian nie jest ważny, archiwum i tak zawiera całą rodzinę. Selekcją zajmiemy się dalej.

Proszę rozpakować archiwum. Potrzebujemy plików Roboto-Regular.ttf i Roboto-Bold.ttf.

Krok 3. Proszę przekonwertować fonty na formaty webowe

Przeglądarki nie używają.ttf bezpośrednio. Potrzebne są formaty WOFF i WOFF2, są one skompresowane i ładują się szybciej. Są dwa narzędzia, oba bezpłatne.

Transfonter, klasyka: wchodzimy na transfonter.org, klikamy „Add fonts", wgrywamy pliki.ttf.

Ustawienia pozostawiamy domyślne, WOFF i WOFF2 pokrywają wszystkie nowoczesne przeglądarki. EOT (dla starych Internet Explorerów) w 2026 roku nie jest potrzebny. Klikamy „Convert".

Google-webfonts-helper, bardziej nowoczesna opcja przeznaczona specjalnie dla Google Fonts. Serwis gwfh.mranftl.com sam generuje zarówno pliki WOFF2, jak i gotowy CSS z @font-face. Nie trzeba wgrywać fontów na zewnętrzny serwer, wszystko odbywa się lokalnie w przeglądarce. W przypadku fontów licencjonowanych i krojów brandowych ma to krytyczne znaczenie.

Które narzędzie wybrać? Transfonter jest prostszy do jednorazowego zadania. Google-webfonts-helper jest wygodniejszy, jeśli zmienia Pan/Pani fonty często lub pracuje z komercyjnymi krojami, których nie chce Pan/Pani wgrywać na obce serwery.

Krok 4. Proszę wgrać webfonty na serwer

Po konwersji pobieramy ZIP. W środku znajdują się pliki.woff i.woff2 dla każdego odmiany. Dla Roboto Regular i Bold otrzymujemy 4 pliki:

Wgrywamy je przez FTP lub menedżer plików hostingu do folderu /wp-content/uploads/fonts/. Ścieżka /wp-content/uploads/ nie została wybrana przypadkowo: aktualizacje rdzenia i motywu jej nie ruszają, w przeciwieństwie do folderu motywu.

Po wgraniu proszę sprawdzić, otwierając w przeglądarce bezpośredni link do pliku:

https://ваш-сайт.com/wp-content/uploads/fonts/Roboto-Regular.woff2

Przeglądarka powinna rozpocząć pobieranie. Jeśli nie, proszę sprawdzić uprawnienia do folderu (powinny być 755) i samą ścieżkę.

Krok 5. Proszę zdefiniować @font-face w CSS

W archiwum ZIP z Transfontera znajduje się plik stylesheet.css, jest to gotowy szablon do podłączenia fontu. Otwieramy go i kopiujemy zawartość.

Wklejamy kod na samą górę style.css aktywnego motywu (lub custom.css, jeśli motyw go obsługuje). Ścieżka do plików na serwerze produkcyjnym, nie z archiwum. Proszę zastąpić względne adresy URL absolutnymi:

Kod źródłowy z stylesheet.css:

1
src: url('Roboto-Bold.woff2') format('woff2'),
2
     url('Roboto-Bold.woff') format('woff');

Zmieniamy na:

1
src: url('https://ваш-сайт.com/wp-content/uploads/fonts/Roboto-Bold.woff2') format('woff2'),
2
     url('https://ваш-сайт.com/wp-content/uploads/fonts/Roboto-Bold.woff') format('woff');

Proszę zastąpić ваш-сайт.com swoją domeną. Proszę powtórzyć dla każdej odmiany.

Aby wygodnie używać fontu w kodzie, proszę dodać poniżej klasy opakowujące:

1
.roboto_font {
2
  font-family: "Roboto", "Arial", sans-serif;
3
}
4
 
5
.roboto_bold_font {
6
  font-family: "Roboto", "Arial", sans-serif;
7
  font-weight: bold;
8
}

Teraz każdy element z klasą roboto_font lub roboto_bold_font będzie wyświetlany fontem Roboto.

Krok 6. Proszę sprawdzić wyświetlanie

Proszę utworzyć stronę testową (lub otworzyć dowolną istniejącą w trybie szkicu) i wstawić w edytorze tekstowym HTML:

1
<h2>Стандартный шрифт темы</h2>
2
<h2 class="roboto_font">Roboto Regular — пользовательский шрифт</h2>
3
<h2 class="roboto_bold_font">Roboto Bold — жирное начертание</h2>

Proszę otworzyć podgląd. Pierwszy nagłówek standardową czcionką motywu, drugi i trzeci Roboto.

Jeśli czcionka nie została zastosowana, proszę otworzyć konsolę przeglądarki (F12 → Network) i sprawdzić, czy pliki WOFF2 ładują się z Pana domeny, a nie z fonts.gstatic.com. Kod odpowiedzi powinien wynosić 200, typ font/woff2.

Krok 7. Proszę ustawić czcionkę jako domyślną

Aby Roboto obowiązywał na całej stronie bez dopisywania klas do każdego nagłówka, proszę dodać w style.css:

1
body {
2
  font-family: "Roboto", "Arial", sans-serif;
3
}

Uwaga: jeśli motyw już używa niestandardowej czcionki, proszę znaleźć w style.css linie z font-family i zastąpić je. Bezpośrednie dopisanie reguły body na wierzchu istniejącej spowoduje konflikt, proszę upewnić się, że stare deklaracje zostały usunięte lub zakomentowane.

Krok 8. Proszę skonfigurować zapasowy zestaw czcionek

Google Fonts nie jest czcionką systemową. Jeśli przeglądarka nie będzie mogła jej załadować (odwiedzający bez internetu, blokada reklam, tymczasowa awaria), strona pozostanie bez tekstu. Rozwiązaniem jest zestaw czcionek.

Nieprawidłowo:

1
font-family: 'Roboto';

Prawidłowo, z czcionkami zapasowymi:

1
font-family: 'Roboto', Arial, sans-serif;

Przeglądarka próbuje użyć Roboto. Jeśli się nie uda, bierze Arial. Jeśli nie ma Arial, systemowy sans-serif. Strona jest zawsze czytelna, nawet jeśli niestandardowa czcionka nie załaduje się w pełni.

Krok 9. Proszę ponownie przetestować stronę w GTmetrix

Proszę uruchomić GTmetrix ponownie. Sekcja „Waterfall" nie powinna już pokazywać zapytań do fonts.googleapis.com i fonts.gstatic.com. Błąd „Serve static assets with an efficient cache policy" dla czcionek również znika, ponieważ teraz te zasoby są na Pana serwerze i są buforowane według Pana reguł.

Jeśli błędy pozostały, proszę sprawdzić zakładkę Waterfall. Być może motyw lub wtyczka (na przykład Elementor) nadal pobierają czcionki z CDN Google. Wtedy pomoże następny rozdział.

Alternatywa dla leniwych: wtyczka Local Google Fonts

Jeśli nie chce się Panu zajmować FTP i CSS, jest wtyczka Local Google Fonts. Automatycznie znajduje ona wszystkie Google Fonts używane przez motyw i wtyczki, pobiera je i udostępnia z Pana serwera.

Plusy: zainstalował Pan, aktywował, zapomniał. Minusy: działa tylko z Google Fonts (nie z innymi zewnętrznymi fontami) i nie daje Panu precyzyjnej kontroli nad formatami. Dla większości stron na WordPress to w zupełności wystarcza.

Przydatne wideo na ten temat

Po angielsku, ale z czytelną demonstracją każdego kroku, od wyboru fontu do finalnego CSS:

⁉️🤔 Najczęściej zadawane pytania

Czy w 2026 roku konieczne jest lokalne hostowanie fontów?

Z punktu widzenia prawa, tak, jeśli mają Państwo odwiedzających z UE. Sąd w Monachium w 2022 roku stworzył precedens i od tego czasu dziesiątki niemieckich sądów potwierdziły: dynamiczne ładowanie Google Fonts bez zgody = naruszenie RODO. Z punktu widzenia szybkości również tak: dwa dodatkowe zapytania DNS i niekontrolowany zasób zewnętrzny nie przyspieszają strony. Lokalne hostowanie fontów rozwiązuje oba problemy jednocześnie. Wtyczka Local Google Fonts radzi sobie z tym w 5 minut, metoda ręczna z Transfonterem w 15. Proszę wybrać w zależności od gotowości do wejścia na FTP.

Google-webfonts-helper czy Transfonter, co jest lepsze?

Przy jednorazowym podłączeniu jednego fontu różnica jest prawie niezauważalna. Transfonter jest prostszy: wgrywają Państwo.ttf, otrzymują WOFF2 i CSS. Google-webfonts-helper jest wygodniejszy, gdy często zmieniają Państwo fonty: nie wysyła plików na serwer zewnętrzny i od razu generuje gotowy @font-face z prawidłowymi ścieżkami. W przypadku komercyjnych fontów licencyjnych, tylko google-webfonts-helper.

Co zrobić, jeśli po lokalnym wgraniu fonty nie wyświetlają się?

Trzy typowe przyczyny. Pierwsza, nieprawidłowa ścieżka w url(): proszę sprawdzić, czy odnośnik otwiera się w przeglądarce i zwraca plik, a nie 404. Druga, CORS: jeśli fonty są ładowane z CDN lub subdomeny, serwer musi zwracać nagłówek Access-Control-Allow-Origin. Trzecia, konflikt z motywem: proszę otworzyć DevTools (F12 → Computed), znaleźć element z Państwa fontem i sprawdzić, który font-family jest faktycznie stosowany. Często motyw nadpisuje go niżej w kaskadzie.

Czy można hostować fonty na CDN, a nie na własnym serwerze?

Tak, ale CDN musi być Państwa. Kluczowa zasada: fonty są dostarczane z tej samej domeny (lub subdomeny) co strona, bez zapytań międzydomenowych do serwerów zewnętrznych. Wtedy zarówno buforowanie działa, jak i RODO nie jest naruszane.

Jak sprawdzić, czy fonty na pewno ładują się lokalnie?

Proszę otworzyć DevTools → Network → zakładka Font. Odświeżyć stronę. Wszystkie zapytania o fonty powinny kierować się na Państwa domenę. Jeśli widzą Państwo fonts.googleapis.com lub fonts.gstatic.com, gdzieś pozostało zewnętrzne ładowanie. Najprawdopodobniej motyw lub wtyczka nadal z niego korzystają, proszę sprawdzić ustawienia lub zainstalować Local Google Fonts.

Co wybrać: ręczne wgrywanie czy wtyczkę

Jeśli doczytali Państwo do tego miejsca, najprawdopodobniej nie jest Państwu obojętne, co dzieje się z szybkością strony. I słusznie. Różnica między „w miarę szybko" a „GTmetrix Grade A" często opiera się właśnie na takich drobiazgach jak zewnętrzne fonty.

Dla szybkiego rezultatu proszę zainstalować Local Google Fonts. Pięć minut i zewnętrzne zapytania do Google znikają.

Dla pełnej kontroli nad formatami, buforowaniem i stosami zapasowymi, metoda ręczna z Transfonterem lub google-webfonts-helper. Te same 15 minut, ale znają Państwo każdy plik na serwerze.

W każdym przypadku proszę przeprowadzić test w GTmetrix przed i po. Zrzuty ekranu „przed" i „po", to najlepszy sposób, aby upewnić się, że wszystko zostało zrobione nie na darmo.