Czcionki Google w WordPressie. Jak je dodać?

Sprawdź jak zmienić fonty na swojej stronie na WordPressie.

Zmiana czcionki (fontu) w motywie WordPressa to jeden z kroków w celu pełnej personalizacji strony. W bazie Google znajdziemy masę czcionek, które mogą bardziej nam pasować niż domyślny font motywu. Jak zatem dodać czcionki Google do WordPressa?

czcionki google, fonty

Część motywów WordPressa posiadana wbudowaną obsługę czcionek Google. Oznacza to, że w zakładce Wygląd > Dostosuj znajdziemy opcję typu Typography, w której możemy jednym kliknięciem myszy wybrać dowolną czcionkę z bazy Google Fonts.

Nie każdy motyw jednak taką funkcję posiada. Wtedy pojawia się konieczność samodzielnego dodania czcionki Google do WordPressa i ustawienia jej dla wybranych elementów (nagłówków, menu, akapitów, cytatów, widgetów itp.). Jak to zrobić?

1. Dodawanie czcionki Google za pomocą funkcji @import w CSS

To zdecydowanie najszybsza i najprostsza metoda na wdrożenie czcionki Google. Metoda ta nie jest jednak pozbawiona wad – w niektórych przypadkach może spowolnić wczytywanie strony.

Uzyskaj kod importu czcionki Google

Na stronie Google Fonts wybierz font, który Ci się podoba i obok wybranej grubości kliknij przycisk Select this style. Wybrane style i fonty wyświetlą się w kolumnie po prawej stronie.

Skopiuj kod CSS do importu czcionki Google

Przełącz się tam do zakładki Embed, a następnie wybierz metodę „@import”. Pojawi się gotowy kod, który musisz skopiować i wkleić na swoją stronę. Nie kopiuj znacznika otwarcia i zamknięcia. Skopiuj tylko to, co znajduje się pomiędzy, tak jak na powyższym zrzucie.

Wstaw kod do sekcji Dodatkowy CSS w WordPressie

Przejdź do swojego WordPressa i udaj się do zakładki Wygląd > Dostosuj. Na ekranie personalizacji motywu przejdź do Dodatkowy CSS.

Wklej kod na font Google do sekcji CSS

To miejsce, w którym możesz wklejać własny kod CSS. Na samej górze tego pola wklej skopiowany kod CSS. Zapisz zmiany przyciskiem Opublikuj. Twój WordPress ładuje teraz wybrany przez Ciebie font Google.

Ustaw stylowanie elementów na stronie

Jedyne, co pozostało, to wskazanie, które elementy na stronie mają tego fontu używać. Potrzeba do tego najbardziej podstawowej znajomości CSS. Przygotowaliśmy dwa najprostsze schematy – na nagłówki (od h1 do h6) oraz na akapity.

h1, h2, h3, h4, h5, h6 {
	font-family: "Nazwa czcionki", sans-serif;
}
p {
	font-family: "Nazwa czcionki", sans-serif;
}

Wystarczy że zmienisz w nich własną nazwę czcionki, a następnie wkleisz całość do zakładki Dodatkowy CSS w swoim WordPressie.

2. Dodawanie czcionki Google za pomocą pliku functions.php

Innym sposobem na samodzielne dodanie fontu Google jest wklejenie odpowiedniego kodu do pliku functions.php w taki sposób, aby dodać importowanie czcionki do funkcji wp_enqueue_scripts. Do tego sposobu potrzebujesz motywu potomnego w WordPressie.

ZOBACZ RÓWNIEŻ

Jak stworzyć motyw potomny w WordPressie

Motyw potomny pozwala wprowadzić zmiany do plików motywu bez ryzyka ich utraty w przypadku aktualizacji motywu. Jak go stworzyć?

Sprawdź

Uzyskaj link do pożądanego fontu Google

Przejdź na stronę fontu, który chcesz pobrać i wybierz odpowiednie warianty klikając Select this style. W panelu bocznym przejdź do zakładki Embed i wybierz metodę Link.

Skopiuj link do fontu Google

Znajdziesz tu odnośnik do wybranego fonta. Skopiuj tylko link wyświetlany w wartości dla „href=”, czyli na przykład:

https://fonts.googleapis.com/css2?family=Poiret+One&display=swap

Wklej go tymczasowo np. do Notatnika. Za chwilę będziesz go potrzebować, aby sporządzić odpowiedni kod PHP do pliku functions.php.

Wklej kod do pliku functions.php

Otwórz swój plik functions.php w motywie potomnym. Możesz go otworzyć za pomocą wbudowanego w WordPress edytora. Jeśli jednak dla bezpieczeństwa wyłączyłeś edytor plików w WordPressie, to możesz edytować ten plik za pomocą dowolnego klienta FTP, logując się na serwerze.

Wklej do pliku functions.php poniższą funkcję:

function google_fonts() {
    wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css2?family=Poiret+One&display=swap', false );
}
add_action( 'wp_enqueue_scripts', 'google_fonts' );

Podmień adres czcionki w pogrubionym miejscu na adres, który wcześniej skopiowałeś ze strony Google Fonts. Po podmianie zapisz zmiany w pliku functions.php. Czcionka będzie już ładowana w trakcie wczytywania strony – teraz pozostaje Ci już tylko wskazać w CSS, który tekst na stronie ma używać nowego fontu.

Ustaw stylowanie wybranych elementów

Wejdź do zakładki Wygląd > Dostosuj w WordPressie, a następnie udaj się do sekcji Dodatkowy CSS. W tym miejscu możesz dodać własny kod CSS, za pomocą którego podmienisz font dla wybranych elementów na stronie. Możesz to również zrobić edytując plik CSS swojego motywu potomnego i tam wstawić kod.

Ostylowanie wybranych elementów wymaga podstawowej znajomości CSS, ale dla ułatwienia możesz skorzystać ze wspomnianych już wcześniej gotowców, za pomocą których zmienisz font dla nagłówków lub akapitów:

h1, h2, h3, h4, h5, h6 {
	font-family: "Nazwa czcionki", sans-serif;
}
p {
	font-family: "Nazwa czcionki", sans-serif;
}

Zmień w powyższych przykładach nazwę fontu na swoją.

Pamiętaj, że to tylko przykład – niektóre elementy na stronie mogą mieć wymuszany font bardziej dokładnymi selektorami. Wtedy należy zbadać istniejący kod CSS. Opublikuj zmiany i odśwież stronę – wskazane elementy powinny mieć już ustawioną przez Ciebie czcionkę.

3. Dodawanie czcionki Google za pomocą wtyczki

Jeżeli nie chcesz dodać czcionki ręcznie lub boisz się eksperymentować z kodem, to możesz skorzystać z wtyczki. Jedną z takich wtyczek jest Google Fonts Typography. Wejdź w WordPressie do zakładki Wtyczki i wyszukaj w repozytorium Google Fonts Typography. Zainstaluj i aktywuj wtyczkę.

Po włączeniu wtyczki wejdź do Wygląd > Dostosuj. W panelu personalizacji motywu pojawi się teraz nowa zakładka Google Fonts. Możesz tu ustawić bazową czcionkę, a także osobne czcionki dla nagłówków, akapitów itp.

Sekcja Basic Settings pozwala dostosować podstawową, bazową czcionkę dla podstawowego tekstu (Base Typography) oraz dla nagłówków (Headings Typography). Jeśli szukasz bardziej konkretnych ustawień, to wejdź do zakładki Advanced Settings. W tym miejscu możesz ustawić np. font dla nagłówków w treści wpisu.

Po ustawieniu czcionek zgodnie z upodobaniami kliknij Opublikuj. Zmiany zostaną zapisane, a font będzie widoczny już u odwiedzających.

Default image
Błażej Starosta
Wieloletni webmaster, tworzący serwisy przy użyciu popularnych CMS typu WordPress oraz Prestashop. Ma doświadczenie w prowadzeniu sklepów internetowych i stara się być na bieżąco ze wszystkimi nowinkami technologicznymi. Uwielbia dzielić się swoją wiedzą, zawsze chętnie pomoże rozwikłać problemy.
Zostaw komentarz