• Blog
  • Darmowe konsultacje
  • O mnie
  • Kontakt
Wyklikane.pl
  • Blog
  • Darmowe konsultacje
  • O mnie
  • Kontakt

WordPress

  • Strona główna
  • WordPress
  • Jak dodać do WordPress Google Fonts

Jak dodać do WordPress Google Fonts

  • Opublikowane przez Damian Kmieciak
  • Data 25 stycznia 2021
  • Komentarze 2 komentarze
WordPress Google Fonts

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.

WordPress Google Fonts

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:

<link href=”https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap&subset=latin-ext” rel=”stylesheet”>

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.

Edycja motywu
Menu “Wygląd -> Dostosuj”.

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

Zakładka "Typography"
Zakładka “Typography”.
Zakładka "Default Typography"
Zakładka “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?

Edycja elementów strony
Wybierze elementy, które chcesz zmodyfikować.

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.

Suwaki zmiany fontów
Z rozwijanych pozycji wybierz rodzinę i grubość fontów (pamiętaj o latin-extended jeśli chcesz mieć polskie znaki). W zakładce “Appearance” proste suwaki pozwolą Ci zmienić rozmiary, kolory i odstępy.

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!

ZAPISZ SIĘ DO NEWSLETTERA!

Bądź na bieżąco! W newsletterze będziesz otrzymywać m.in. informacje o nowych wpisach na blogu, poradnikach na YouTube, e-bookach oraz ważnych wydarzeniach ze świata WordPress. Wysyłam jedynie wartościowe treści.

Tag:Google Fonts

  • Udostępnij:
author avatar
Damian Kmieciak

Programista, twórca gier i aplikacji na urządzenia mobilne oraz komputery PC. Projektant stron i sklepów internetowych, logotypów, wizytówek, opakowań, ulotek i etykiet. Ostatnio pracownik FIBARO odpowiedzialny za utrzymanie i rozwój strony internetowej.

Poprzedni wpis

Jak dodać miniaturę wpisu
25 stycznia 2021

Następny wpis

Trendy sprzedażowe w social commerce na 2021 rok
8 lutego 2021

Może Ci się spodobać

Sierotki w WordPress
Sierotki w WordPress. Wiszące spójniki i przyimki
5 grudnia, 2022
przełącznik języka na ekranie logowania
Jak wyłączyć przełącznik języka na ekranie logowania
7 listopada, 2022
Jak podzielić długi wpis na podstrony
Paginacja wpisu. Jak podzielić długi wpis na podstrony?
29 sierpnia, 2022

Znajdź na stronie

Kategorie

  • Darmowe motywy
  • Design / Grafika
  • Elementor
  • SEO / Optymalizacja
  • Serwer / IT
  • WooCommerce
  • WordPress

Najnowsze wpisy

Jak wymusić 9 cyfr numeru telefonu w WooCommerce
Jak wymusić 9 cyfr numeru telefonu w WooCommerce
30st.2023
Jak zmienić nazwę sklepu WooCommerce
Jak zmienić nazwę sklepu WooCommerce
16st.2023
Jak wyświetlić polecane produkty
Jak wyświetlić polecane produkty w WooCommerce
02st.2023
Jak zbudować sklep internetowy
Jak zbudować sklep internetowy w WordPress
19gr.2022
Sierotki w WordPress
Sierotki w WordPress. Wiszące spójniki i przyimki
05gr.2022
Wyklikane Logo
+48 503 865 645
kontakt@wyklikane.pl