Kiedy uruchamiają Państwo test witryny w PageSpeed Insights, jedną z częstych diagnoz jest „Ensure text remains visible during webfont load". Po polsku brzmi to „Zadbaj o widoczność tekstu podczas ładowania czcionek internetowych". Problem jest znany każdemu, kto instalował Elementor, Astra lub podłączał Google Fonts: dopóki przeglądarka ładuje plik czcionki, tekst na stronie jest po prostu nieobecny. Biały ekran zamiast nagłówka, ułamki sekund pustki i odwiedzający już wyszedł.

Technicznie nazywa się to FOIT (Flash of Invisible Text). Źródłem problemu jest dyrektywa font-display, której przeglądarka używa domyślnie. Bez jawnego wskazania font-display: swap przeglądarka czeka na załadowanie czcionki i nie pokazuje tekstu, dopóki plik nie zostanie pobrany. A jeśli czcionka ładuje się z CDN, przez domenę zewnętrzną, opóźnienie kumuluje się i PageSpeed Insights odnotowuje ostrzeżenie.

Rozwiązuje się to dwiema rzeczami: po pierwsze, do każdej reguły @font-face należy dodać font-display: swap, wtedy przeglądarka natychmiast pokaże tekst czcionką systemową i „podmieni" go na niestandardową, gdy ta się załaduje. Po drugie, krytycznie ważne czcionki (tę, którą złożony jest nagłówek na pierwszym ekranie) warto wstępnie załadować przez <link rel="preload">. Poniżej znajduje się szczegółowa instrukcja krok po kroku, jak zrobić to w WordPress z uwzględnieniem wtyczek takich jak Elementor i motywów typu Astra.

💡 Szybki przegląd:

• Otwieramy raport PageSpeed Insights i wypisujemy problematyczne czcionki z diagnostyki
• Wyłączamy style wtyczek i motywu przez wp_dequeue_style w functions.php
• Kopiujemy pliki czcionek do lokalnego folderu i odtwarzamy font-face z font-display: swap
• Dodajemy preload dla jednej lub dwóch czcionek z pierwszego ekranu
• Dla niestandardowych czcionek Elementora zmieniamy ścieżkę na lokalną i przebudowujemy CSS

Krok 1: znajdujemy problematyczne czcionki w raporcie

Uruchamiamy audyt w PageSpeed Insights, po otrzymaniu wyniku znajdujemy sekcję diagnostyki. Interesuje nas punkt „Zadbaj o widoczność tekstu podczas ładowania czcionek internetowych", w angielskim interfejsie jest to „Ensure text remains visible during webfont load".

Rozwijamy listę, widzimy konkretne adresy URL czcionek, które nie mają font-display: swap. Zazwyczaj są to:

• fontawesome-webfont.woff2, Font Awesome z Elementora;
• eicons.woff2, czcionka ikon Elementora;
• Google Fonts (Open Sans, Roboto, Montserrat), jeśli motyw pobiera je przez CDN.

Wypisujemy nazwy plików, przydadzą się w kolejnych krokach. Najważniejsze teraz: zrozumieć, która wtyczka lub motyw odpowiada za każdą czcionkę. Font Awesome i eicons pochodzą z Elementora. Google Fonts najczęściej podłącza motyw, w Astra jest to hak astra-google-fonts.

Krok 2: wyłączamy style, które pobierają czcionki

Teraz zadanie polega na usunięciu standardowego podłączenia tych czcionek, aby później przywrócić je z prawidłowymi ustawieniami. Przechodzimy do functions.php motywu potomnego (lub do wtyczki z kodem, takiej jak Code Snippets) i dodajemy:

1
/**
2
 * Отключаем стили, загружающие проблемные шрифты
3
 */
4
function sdstudio_dequeue_font_styles()
5
{
6
    // Astra — Google Fonts
7
    wp_dequeue_style('astra-google-fonts');
8
    wp_deregister_style('astra-google-fonts');
9
 
10
    // Elementor — Font Awesome 4
11
    wp_dequeue_style('font-awesome');
12
    wp_deregister_style('font-awesome');
13
 
14
    // Elementor — eicons
15
    wp_dequeue_style('elementor-icons');
16
    wp_deregister_style('elementor-icons');
17
}
18
add_action('wp_enqueue_scripts', 'sdstudio_dequeue_font_styles', 9999);
19
add_action('wp_head', 'sdstudio_dequeue_font_styles', 9999);

Priorytet 9999 jest ważny: hak musi zadziałać PO tym, jak wtyczki i motyw zarejestrowały swoje style. Jeśli czcionka nadal się ładuje, proszę sprawdzić, czy nie wywołuje jej inna wtyczka (na przykład menu lub formularz kontaktowy mogą podłączać swoją wersję Font Awesome). Proszę wyszukać w plikach wtyczki ciąg wp_enqueue_style z odpowiednim uchwytem (handle).

Po dodaniu kodu ikona Font Awesome na stronie tymczasowo zniknie, to normalne. Przywrócimy ją w kroku 4.

Krok 3: kopiujemy pliki czcionek do lokalnego folderu

Kiedy czcionka jest podłączona przez CDN lub przez wtyczkę, przeglądarka wykonuje dodatkowe zapytanie DNS do zewnętrznej domeny. Lokalny hosting czcionek eliminuje to opóźnienie. Algorytm:

• Znajdujemy pliki czcionek w strukturze wtyczki. Dla Font Awesome z Elementora ścieżka będzie następująca: /wp-content/plugins/elementor/assets/lib/font-awesome/fonts/. Dla eicons: /wp-content/plugins/elementor/assets/lib/eicons/fonts/. Dla Google Fonts pobieramy .woff2 z CDN Google Fonts.

• Tworzymy folder /wp-content/fonts/ w katalogu głównym witryny i kopiujemy tam wszystkie potrzebne pliki. Wystarczą formaty .woff2 (nowoczesne przeglądarki) i .woff (wariant zapasowy dla starszych).

• Jeśli czcionka była podłączona przez motyw z CDN Google Fonts, pobieramy aktualny .woff2 ręcznie przez bezpośredni link lub za pomocą wtyczki OMGF (o niej poniżej).

Teraz każda czcionka ma lokalną ścieżkę w rodzaju /wp-content/fonts/fontawesome-webfont.woff2. Przechodzimy do najważniejszego, czyli podłączenia.

Krok 4: podłączamy czcionki z font-display: swap i preload

Style są wyłączone, pliki są na miejscu. Teraz definiujemy @font-face z prawidłową dyrektywą font-display: swap i dodajemy preload dla natychmiastowego ładowania. Kod umieszczamy w functions.php przez hak wp_head:

1
/**
2
 * Подключаем шрифты локально с font-display: swap и preload
3
 */
4
function sdstudio_inject_font_preload()
5
{
6
    ?>
7
    <!-- Предзагрузка критических шрифтов -->
8
    <link rel="preload" href="/wp-content/fonts/fontawesome-webfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
9
    <link rel="preload" href="/wp-content/fonts/eicons.woff2" as="font" type="font/woff2" crossorigin="anonymous">
10
 
11
    <style>
12
        /* Font Awesome — иконочный шрифт */
13
        @font-face {
14
            font-family: 'FontAwesome';
15
            font-display: swap;
16
            font-style: normal;
17
            font-weight: normal;
18
            src: url('/wp-content/fonts/fontawesome-webfont.woff2') format('woff2'),
19
                 url('/wp-content/fonts/fontawesome-webfont.woff') format('woff');
20
        }
21
 
22
        /* eicons — иконки Elementor */
23
        @font-face {
24
            font-family: 'eicons';
25
            font-display: swap;
26
            font-style: normal;
27
            font-weight: normal;
28
            src: url('/wp-content/fonts/eicons.woff2') format('woff2'),
29
                 url('/wp-content/fonts/eicons.woff') format('woff');
30
        }
31
    </style>
32
    <?php
33
}
34
add_action('wp_head', 'sdstudio_inject_font_preload', 5);

Priorytet 5 w wp_head oznacza, że tagi preload znajdą się w <head> jako jedne z pierwszych, przeglądarka zacznie ładować czcionkę, zanim dojdzie do CSS. Atrybut crossorigin="anonymous" jest obowiązkowy dla preload czcionek: bez niego przeglądarka zignoruje wstępne ładowanie i załaduje plik ponownie.

Ważny niuans: w adresie URL wewnątrz @font-face nie powinno być parametrów zapytania w rodzaju ?#iefix lub ?v=4.7.0. PageSpeed Insights potyka się o nie podczas analizy. Link musi być czysty: /wp-content/fonts/fontawesome-webfont.woff2, i tyle.

Po dodaniu kodu czyścimy cache (wtyczka cache + Cloudflare, jeśli jest używany) i ponownie uruchamiamy PageSpeed Insights. Ostrzeżenie o czcionkach powinno zniknąć. Ikony Font Awesome wracają na swoje miejsce, ale teraz nie blokują wyświetlania tekstu.

Krok 5: niestandardowe czcionki Elementora, przypadek szczególny

Jeśli używają Państwo Elementor Pro z funkcją „Niestandardowe czcionki" (Custom Fonts), logika jest taka sama, ale są dwa dodatkowe kroki.

Po pierwsze, zmieniamy ścieżkę do czcionki w ustawieniach Elementora. Wchodzimy w Elementor → Custom Fonts, otwieramy potrzebną czcionkę i w polu URL wskazujemy lokalną ścieżkę /wp-content/fonts/ваш-шрифт.woff2 zamiast zewnętrznego CDN lub linku do Google Fonts:

Po drugie, przebudowujemy CSS Elementora. Po zmianie ścieżki przechodzimy do Elementor → Tools → Regenerate CSS i klikamy przycisk regeneracji. To zmusi Elementor do przebudowania plików stylów z nowymi ścieżkami do czcionek:

Po regeneracji sprawdzamy, czy w kodzie HTML strony ścieżka do czcionki prowadzi do pliku lokalnego, a nie do CDN. Następnie w header.php (lub przez wp_head jak w kroku 4) dodajemy preload dla tej czcionki:

1
<link rel="preload" href="/wp-content/fonts/FuturaBookC.woff2" as="font" type="font/woff2" crossorigin="anonymous">

I odpowiedni @font-face z font-display: swap:

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

Alternatywna ścieżka: wtyczki do automatycznej optymalizacji

Metoda ręczna daje pełną kontrolę, ale wymaga uwagi podczas aktualizacji wtyczek (aktualizacja Elementora może przywrócić standardowe podłączenie czcionek). Jeśli chcą Państwo zautomatyzować proces, oto dwie wtyczki, które rozwiązują zadanie bez edycji kodu.

OMGF (Optimize My Google Fonts). Bezpłatna wtyczka, która skanuje wszystkie Google Fonts na stronie, pobiera je lokalnie i dodaje font-display: swap automatycznie. Instalują Państwo, klikają „Optimize" i wszystkie Google Fonts Państwa motywu zamieniają się w lokalne z prawidłowymi nagłówkami. Wersja Pro potrafi pracować z Adobe Fonts i dowolnymi zewnętrznymi czcionkami z CDN.

Swap Google Fonts Display. Minimalistyczna wtyczka, która robi dokładnie jedno: dodaje font-display: swap do wszystkich Google Fonts w locie. Nie pobiera lokalnie, ale usuwa ostrzeżenie PageSpeed Insights w 10 sekund po instalacji. Nadaje się jako rozwiązanie tymczasowe lub jeśli lokalny hosting czcionek nie jest krytyczny.

Wtyczki oszczędzają czas, ale proszę pamiętać: działają tylko z Google Fonts. Czcionek ikon (Font Awesome, eicons) i niestandardowych czcionek Elementora nie dotykają, tutaj i tak trzeba przejść ręczne kroki 1-5.

⁉️🤔 Często zadawane pytania

Czy trzeba wstępnie ładować WSZYSTKIE czcionki witryny?

Nie. <link rel="preload"> ma sens tylko dla jednej lub dwóch czcionek, które trafiają na pierwszy ekran, na przykład czcionki nagłówka H1 i czcionki tekstu głównego. Wstępne ładowanie kilkunastu czcionek przyniesie odwrotny skutek: przeglądarka zużyje pasmo na pliki, które nie są potrzebne w danej chwili, i spowolni ładowanie krytycznej treści. Proszę wstępnie ładować tylko czcionki używane w first viewport. Dla typowego bloga to jedna czcionka nagłówka i jedna tekstowa, razem dwa pliki woff2. Czcionkę ikon warto wstępnie ładować tylko wtedy, gdy ikona znajduje się na pierwszym ekranie (menu, wyszukiwarka). Cała reszta zostanie pobrana w miarę przewijania bez szkody dla metryk PageSpeed.

Co robić, jeśli po wyłączeniu stylów witryna „się rozjechała"?

Najczęstszy scenariusz: wyłączyli Państwo elementor-icons i zniknęły strzałki slidera lub ikona wyszukiwania. Rozwiązanie: przed wyłączeniem proszę sprawdzić, które dokładnie elementy używają czcionki. Proszę otworzyć DevTools (F12), zakładka Elements, znaleźć ikonę i spojrzeć na klasę CSS. Jeśli klasa zaczyna się od fa-, to Font Awesome. Jeśli od eicon-, to eicons. Proszę wyłączać tylko to, co jest rzeczywiście używane, i lokalnie podłączać te same pliki, wizualnie nic się nie zmieni. Witryna „rozjeżdża się" w dwóch przypadkach: albo wyłączyli Państwo styl, który oprócz czcionki zawierał reguły CSS (rzadko, ale zdarza się z motywami takimi jak Astra), albo nie podłączyli Państwo czcionki z powrotem lokalnie. W pierwszym przypadku proszę wyciągnąć reguły CSS z wyłączonego pliku i skopiować je do swojego bloku wp_head. W drugim, po prostu dodać brakujący @font-face.

Czy metoda nadaje się do każdego motywu WordPress?

Tak, z zastrzeżeniami. Zasada dequeue style → local fonts → font-display: swap → preload jest uniwersalna. Zmieniają się tylko uchwyty (handle) stylów: w Astra to astra-google-fonts, w GeneratePress to generate-fonts, w OceanWP to oceanwp-google-fonts. Aby znaleźć uchwyt Państwa motywu, proszę otworzyć kod źródłowy strony (Ctrl+U), znaleźć <link rel="stylesheet" z czcionką i spojrzeć na id tagu, to jest właśnie uchwyt. Następnie proszę go podstawić do wp_dequeue_style. Nowoczesne motywy (2024-2026) coraz częściej dodają font-display: swap od razu: Twenty Twenty-Five, motywy blokowe oparte na theme.json już mają to ustawienie. Zanim zaczną Państwo edytować kod, proszę sprawdzić, być może Państwa motyw już robi wszystko prawidłowo, a ostrzeżenie wywołuje tylko czcionka ikon z osobnej wtyczki.

Czy koniecznie trzeba kopiować czcionki lokalnie?

Technicznie, nie. font-display: swap działa również z czcionkami podłączonymi przez CDN (Google Fonts, cdnjs). Ale lokalny hosting daje dwie korzyści: po pierwsze, eliminują Państwo zbędne zapytanie DNS do zewnętrznej domeny (oszczędność 50-200 ms), po drugie, nie są Państwo zależni od dostępności CDN. Jeśli Google Fonts przestanie działać, Państwa witryna pozostanie z czytelnym tekstem. Dla witryny produkcyjnej lokalny hosting to zasada dobrego tonu, dla projektu hobbystycznego jest opcjonalny. Wyjątek: czcionki ikon. Font Awesome, eicons, dashicons ładują się z wtyczki (lokalnie z definicji), ich kopiowanie do folderu głównego jest potrzebne tylko po to, aby „przechwycić" kontrolę nad ładowaniem po dequeue. Sam plik fizycznie jest już na serwerze.

Co robić z ostrzeżeniem o czcionkach: algorytm podsumowujący

Proszę przejść pięć kroków z tego poradnika, a ostrzeżenie „Ensure text remains visible during webfont load" zniknie z raportu PageSpeed Insights. W skrócie: wyłączają Państwo standardowe podłączenie → umieszczają czcionki lokalnie → przywracają z font-display: swap → wstępnie ładują krytyczny woff2 → dla Elementor dodatkowo zmieniają ścieżkę i przebudowują CSS. W efekcie tekst na stronie jest widoczny natychmiast, metryki LCP i FCP ulegają poprawie, a odwiedzający nie widzą „skaczącej" strony.

Jeśli nie chcą Państwo zagłębiać się w kod, proszę zacząć od wtyczki OMGF dla Google Fonts. Dla czcionek ikon nie ma wtyczki „pigułki", i tak trzeba je obsłużyć ręcznie, ale to 20 minut pracy, która procentuje wzrostem punktów w PageSpeed i realnym przyspieszeniem ładowania. Proszę próbować i testować po każdej zmianie, tylko powtórny audyt pokaże, że problem został naprawdę rozwiązany.