Google Fonts bez spowalniania strony: jak ładować fonty z głową

Font może wyglądać niewinnie, a mimo to opóźniać pierwszy tekst na stronie. Google Fonts są wygodne, ale każda rodzina, odmiana i grubość to dodatkowe żądania, DNS, połączenia i pliki do pobrania. Przy słabym połączeniu użytkownik czeka albo widzi skaczący tekst.

Celem nie jest rezygnacja z ładnej typografii. Celem jest ograniczenie kosztu: mniej odmian, dobre preconnect, font-display, lokalne fallbacki i brak pobierania fontów, których strona realnie nie używa.

Najczęstsze problemy

• ładowanie kilku rodzin fontów dla jednej strony
• pobieranie wszystkich grubości od 100 do 900
• brak font-display: swap
• zły fallback, przez który tekst skacze po załadowaniu
• fonty ładowane przez motyw, builder i dodatkową wtyczkę naraz

W WordPressie szczególnie łatwo zrobić bałagan. Motyw dodaje jedną rodzinę, builder drugą, wtyczka z formularzem trzecią. Użytkownik nie widzi „profesjonalnej typografii”, tylko wolniejszą stronę.

Praktyczna konfiguracja

1. Wybierz jedną rodzinę tekstową i ewentualnie jedną do nagłówków.
2. Zostaw tylko używane grubości, na przykład 400, 600 i 700.
3. Dodaj preconnect do fonts.googleapis.com i fonts.gstatic.com, jeśli fonty idą z Google.
4. Używaj font-display: swap.
5. Dopasuj fallback, żeby ograniczyć przesunięcia układu.

Lokalnie czy z Google

Hosting fontów lokalnie daje większą kontrolę i ogranicza zewnętrzne żądania. Trzeba jednak pilnować formatów, cache i aktualizacji plików. Ładowanie z Google jest szybkie w wielu scenariuszach, ale dochodzi połączenie z zewnętrzną domeną i kwestie prywatności, które warto uwzględnić w polityce strony.

Jeśli strona ma ruch z UK i Polski, testuj na realnym mobile, a nie na samym szybkim biurowym internecie. Font, który na laptopie ładuje się natychmiast, na telefonie może być widoczny w metrykach LCP i CLS.

Jak sprawdzić efekt

• PageSpeed Insights dla strony głównej i podstrony bloga
• DevTools Network z filtrem font
• Core Web Vitals w Search Console
• porównanie liczby requestów przed i po zmianie
• wizualny test, czy tekst nie skacze po załadowaniu

Dobra typografia ma pomagać w czytaniu. Jeśli font spowalnia stronę, pobiera osiem odmian i pogarsza stabilność układu, projekt trzeba uprościć. Najczęściej wystarczy mniej grubości i lepszy fallback.

Źródła pomocnicze: web.dev: optimize web fonts, Google Fonts CSS API.