Krój czcionki na stronie internetowej ma niebagatelne znaczenie. Nadaje stronie charakteru, kształtuje wizerunek, kształtuje design a jest przy tym jedną z pierwszych rzeczy, którą użytkownik zauważa po wejściu na Twój blog lub stronę. Jeśli pragniesz się wyróżnić, to prawdopodobnie chcesz podpiąć do swojego WordPress Google Fonts, czyli darmowe fonty z serwisu od Google. W tym wpisie pokażę Ci jak tego dokonać. Jak zawsze – masz do wyboru kilka opcji.

Czym jest Google Fonts?

Skoro czytasz ten artykuł to zakładam, że jednak wiesz czym jest ta popularna usługa. Jeśli jednak jakimś cudem jesteś tu przypadkiem – już spieszę z wyjaśnieniem.

Google Fonts to usługa zbierająca i udostępniająca różne darmowe fonty. Specjalnie przygotowany serwis pozwala je przeglądać, testować, pobierać i osadzać na stronach internetowych. Gdy wybierzesz swój ulubiony krój fonta, możesz go albo pobrać i zapisać na dysk (np. w celu użycia w systemie operacyjnym i różnych programach) lub osadzić na stronie internetowej za pomocą fragmentu kodu HTML.

Ważna uwaga: wybierając krój, zwracaj uwagę, czy posiada on obsługę polskich znaków. Dlatego jeśli chcesz osadzić fonta na stronie, pobieraj kod z parametrem „latin-extended”. W przeciwnym przypadku Twoje teksty nie będą miały polskich ogonków.

Załóżmy, że podoba Ci się font Roboto i wybrałeś style light, regular i bold (ich grubości w CSS to odpowiednio 300, 400 i 700). Twój link do fonta będzie wyglądał następująco:

Jak dodać do WordPress Google Fonts

1) Przez edycję motywu

Pierwszą (i moim zdaniem najlepszą) metodą jest wpięcie fonta bezpośrednio za pomocą krótkiego kodu w motywie potomnym strony (child theme). Z powyższego kodu interesuje Cię zatem jedynie fragment „https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap&subset=latin-ext”.

Aby osadzić fonta tą metodą, wystarczy jedynie przejść w zapleczu WordPress do menu „Wygląd -> Edytor motywu” a następnie z listy dostępnych plików do edycji wybrać „functions.php”. W ostatniej linijce pliku dodaj poniższy kod i zapisz zmiany:

// Własne fonty Google
function add_google_fonts() {
wp_enqueue_style( ‘google_fonts ‘, ‘ https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap&subset=latin-ext‘, false );}

add_action( ‘wp_enqueue_scripts’, ‘add_google_fonts’ );

Pierwsza linijka zaczynająca się od „//” to oczywiście komentarz do funkcji. W drugiej linijce definiujesz własną funkcję o nazwie „add_google_fonts” z linkiem do wybranego fonta. Ostatnia linijka kolejkuje Twoją funkcję do wykonania przez WordPress.

2) Za pomocą wtyczki

Drugą metodą dodania do WordPress Google Fonts jest skorzystanie z gotowej wtyczki. Jest ich dość sporo. Dziś pokażę Ci na przykładzie Easy Google Fonts.

Na początku pobierz i zainstaluj wtyczkę. Jeśli nie wiesz jak tego dokonać, sprawdź w moim wpisie jak dodać wtyczkę WordPress i wróć do artykułu.

Po włączeniu wtyczki nie musisz nic ustawiać ani konfigurować, pomimo, że posiada ona opcje dla bardziej zaawansowanych użytkowników. Jako że integruje się ona z każdym dowolnym motywem, możesz od razu przejść do działania i wybrać jeden z ponad 600 dostępnych fontów.

W zapleczu strony, z menu po lewej wybierz „Wygląd -> Dostosuj”. Zobaczysz edytor wizualny Twojego motywu. Odszukaj zakładki „Typography” i wybirz „Default Typography”.

W tym miejscu możesz dla każdego typu treści wybrać swój ulubiony krój czcionki dla paragrafów i nagłówków. Prawda, że proste?

Ale to nie koniec

Jeśli chcesz, w tym samym miejsu możesz także dokłdanie spersonifikować swoje ustawienia. Wtyczka Easy Google Fonts daje Ci tu możliwość nie tylko zmienić font, ale także kolory, rozmiary, odstępy i dekoracje tekstu. Wszystko za pomocą prostych w obsłudze suwaków.

A co z Tobą? Jaki jest Twój ulubiony font Google? Lubisz stosować coś niestandardowego? Arial, Verdana i Roboto nie są dla Ciebie? A może wolisz Open Sans? Tylko proszę nie mów, że stosujesz Comic Sans 😉

Daj znać w komentarzu!