Jak dodać własną czcionkę lokalnie bez Google Fonts w WordPress?

Hej!

Hostowanie czcionek lokalnie zamiast przez Google Fonts ma dwie zalety – szybkość ładowania i zgodność z RODO (brak przesyłania IP użytkownika do Google). Warto to zrobić szczególnie jeśli obsługujesz klientów z Europy.

Krok 1 – pobierz pliki czcionki

Wejdź na google-webfonts-helper.herokuapp.com, znajdź swoją czcionkę i pobierz pliki w formatach WOFF i WOFF2. To dwa formaty obsługiwane przez wszystkie współczesne przeglądarki.

Krok 2 – wgraj pliki na serwer

Przez FTP wgraj pliki czcionki do katalogu motywu potomnego, np. do folderu wp-content/themes/twoj-motyw-child/fonts/.

Krok 3 – zadeklaruj czcionkę w CSS

W pliku style.css motywu potomnego dodajesz:

@font-face {
font-family: 'NazwaCzcionki';
src: url('fonts/nazwa-czcionki.woff2') format('woff2'),
url('fonts/nazwa-czcionki.woff') format('woff');
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'NazwaCzcionki';
src: url('fonts/nazwa-czcionki-bold.woff2') format('woff2'),
url('fonts/nazwa-czcionki-bold.woff') format('woff');
font-weight: 700;
font-style: normal;
font-display: swap;
}

Krok 4 – użyj czcionki w CSS

body {
font-family: 'NazwaCzcionki', sans-serif;
}

font-display: swap – po co?

Sprawia że podczas ładowania czcionki przeglądarka pokazuje tekst w czcionce systemowej zamiast ukrywać treść. Strona wygląda normalnie od razu – czcionka podmienia się gdy się załaduje. Dobry dla Core Web Vitals. 😊