Jak zmienić czcionkę w WordPress'ie | | Biznes Zoom
FreshMail.pl

Jak zmienić czcionkę w WordPress’ie

Oglądasz swoją stronę lub bloga i masz wrażenie, że przydałby się delikatny refresh? Domyślna czcionka wydaje Ci się jakaś nudna i nieczytelna? W tym wpisie dowiesz się, jak w łatwy i bezpieczny sposób zmienić czcionkę na jeden z darmowych fontów Google!

Po pierwsze bezpieczeństwo

W pierwszej kolejności powinniśmy dowiedzieć się jak stworzyć motyw potomny oraz go dodać do naszej strony. Po co? Bo wszelkie zmiany w kodzie muszą być trwałe na wypadek wystąpienia ewentualnych błędów (tfu! tfu!). Wówczas zawsze możemy wrócić do poprzedniej wersji.

A więc po utworzeniu motywu potomnego dodajemy do niego kopię pliku nagłówka, czyli header.php.

Wybór czcionki

Kwestie techniczne mamy już niemal za sobą, teraz możemy się zabrać za część, którą bardzo lubię, czyli za wybór najlepszej czcionki 🙂 Wchodzimy na stronę: http://fonts.google.com i tam dokonujemy wyboru interesującej nas czcionki.

Google Fonts na WordPressie

 

Ja wybrałem czcionkę typu sans serif (bezszeryfowa) o nazwie Roboto. Robię to poprzez kliknięcie Select this font w prawym górnym rogu.

Upewniłem się, że podoba mi się ona w małym rozmiarze. Jednak przy większym rozmiarze znaków wolałbym inną czcionkę. Czy da się użyć dwóch fontów jednocześnie ? Jasne! Już Ci tłumaczę jak 🙂

W lewym dolnym rogu strony znajdują się czcionki, które często są parowane z wybraną przeze mnie. Po sprawdzeniu, jak się prezentują one w zestawieniu, wybieram Raleway klikając Plus. Jeśli nie podobają mi się przykłady najczęstszych proponowanych zestawień, mogę wyszukać samodzielnie pasującą według mnie czcionkę i postąpić analogicznie jak z Roboto, czyli klikając Select this fontprzy wybranym przeze mnie foncie.

Jak zamieścić kod Google Fonts ?

Gdy już zdecydowałem się co do wyboru czcionek klikam w prawym dolnym rogu strony w zakładkę:

Font families

…i od razu przechodzę do opcji „Customize”. Wybieram tam grubość czcionek, która mnie interesuje. By czcionka poprawnie wyświetlała polskie znaki koniecznie wybieram „Latin extended” w menu „Languages”. Teraz z powrotem wchodzę w zakładkę „Embed” i kopiuję kod Google Fonts:

<link href="https://fonts.googleapis.com/css?family=Raleway|Roboto&amp;subset=latin-ext" rel="stylesheet">

Wklejam go do wcześniej przygotowanego przeze mnie pliku header.php w motywie potomnym. Kod należy umieścić pomiędzy znacznikami <head> … </head>.

Na koniec pozostała nam edycja pliku style.css w motywie potomnym. Dodaje w nim drugi kod pobrany ze strony Google Fonts, znajdujący się na dole tego menu:

Kod google fonts

    • Aby zmienić czcionkę w tekście „ogólnym” na stronie wpisuję w style.css motyw potomnego:
body {
font-family: 'Roboto', sans-serif;
}

p {
font-family: 'Roboto', sans-serif;
}
    • Aby zmienić nagłówki:
h1, h2, h3, h4, h5, h6 {
font-family: 'Raleway', sans-serif;
}

 

Jeśli potrzebuję zmienić gdzieś jeszcze czcionkę, to robię to wyszukując (poprzez wciśnięcię ctrl+f)  wszystkie fragmenty kodu zawierające ciąg znaków „font-family” w pliku style.css należącym do oryginalnego motywu. Kopiuje je do Style.css motywu potomnego i podmieniam według tego samego co powyżej schematu.

 

Ostatecznie plik style.css motywu potomnego powinien wyglądać mniej więcej tak:

/*
Theme Name: zerif-child
Template: zerif-lite
*/

@import url("../zerif-lite/style.css");

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

p {
font-family: 'Roboto', sans-serif;
}


h1, h2, h3, h4, h5, h6 {
font-family: 'Raleway', sans-serif;
}

textarea {
 color: #404040;
 font-family: 'Roboto';


I teraz najprzyjemniejszy moment:  możemy podziwiać efekt swojej pracy 🙂

W razie potrzeby służę pomocą ! Piszcie do mnie na szymon.gajewski@bizneszoom.pl 🙂

 

Autor: Szymon GajewskiSzymon Gajewski

IT Manager Biznes Zoom

szymon.gajewski@bizneszoom.pl

Spodobał Ci się ten artykuł? Podziel się nim!

7 thoughts on “Jak zmienić czcionkę w WordPress’ie

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Top

Pudełko i CD
Chcesz pobrać darmowe infografiki ? Tak!

Wpisz poniżej adres e-mail, na który ma zostać wysłany bezpłany zestaw infografik! Zapisz się na nasz newsletter:

FreshMail.pl