SEOMaster
WOFF2 (czcionki webowe)
Skompresowany format czcionek dla webu.
WOFF2 (czcionki webowe) w 30 sekund
- 01 · Zrozum: WOFF2 (Web Open Font Format 2) to skompresowany format czcionek internetowych — najlżejszy i najszerzej obsługiwany sposób dostarczania fontów na stronę.
- 02 · Sprawdź: Sprawdź, czy fonty są w formacie .woff2 i czy mają ustawione font-display (np.
- 03 · Unikaj: Ładowanie wielu wariantów i grubości, których strona nie używa
Co to jest WOFF2 (czcionki webowe)?
WOFF2 (Web Open Font Format 2) to skompresowany format czcionek internetowych — najlżejszy i najszerzej obsługiwany sposób dostarczania fontów na stronę.
Sposób ładowania czcionek (właściwość font-display) decyduje, czy podczas pobierania fontu tekst jest niewidoczny, czy pokazany zastępczym krojem. Źle ustawiony powoduje „skok” lub miganie tekstu.
Dlaczego to ważne dla SEO
Czcionki potrafią opóźnić wyświetlenie tekstu i wywołać przeskoki układu (CLS). WOFF2 + rozsądny font-display dają szybki, stabilny tekst.
Jak to sprawdzić
Sprawdź, czy fonty są w formacie .woff2 i czy mają ustawione font-display (np. swap). W Network zobaczysz rozmiar i czas ładowania czcionek.
Częste błędy
- Ładowanie wielu wariantów i grubości, których strona nie używa
- Brak font-display → niewidoczny tekst podczas ładowania
- Hostowanie ciężkich, starszych formatów czcionek
Przykład
@font-face { font-family: 'X'; src: url('x.woff2') format('woff2'); font-display: swap; }
Najczęstsze pytania
Czy font-display: swap jest zawsze najlepszym wyborem?
To dobry punkt wyjścia dla tekstu, który ma być widoczny natychmiast, ale późna podmiana może zmienić metrykę kroju i przesunąć układ. Dla mniej ważnych fontów rozważ fallback albo optional, a fallback systemowy dopasuj przez size-adjust i pokrewne deskryptory.
Czy sam format WOFF2 rozwiązuje problem ładowania fontów?
Nie. WOFF2 zmniejsza transfer, lecz nie wybiera zachowania tekstu przed zakończeniem pobierania. Nadal potrzebujesz świadomego font-display, sensownego fallbacku, ograniczonej liczby odmian i ewentualnego preloadu tylko dla kroju naprawdę potrzebnego nad zgięciem.
Jak sprawdzić, czy webfont szkodzi stronie?
W DevTools sprawdź deklaracje @font-face, wodospad żądań fontów i nagranie Performance. Szukaj niewidocznego tekstu, późnej podmiany kroju, przesunięć CLS oraz wielu nieużywanych wag lub alfabetów.
Poradniki na ten temat
- Jak poprawić Core Web Vitals — LCP, INP i CLS po kolei — Trzy metryki, trzy zupełnie różne przyczyny. Ten poradnik idzie od zmian, które zajmują kwadrans i dają najwięcej, do przebudów, w które warto wchodzić dopiero na końcu.