Wygląd strony dla Twoich czytelników jest prawie tak ważna jak treść. Jednym z elementów na stronie, który stosunkowo łatwo jest zmienić jest czcionka*. Są nawet osoby twierdzące, że dobrze dobrana czcionka to połowa dobrego wyglądu strony internetowej. Niestety, bez modyfikacji będziesz skazany na wybór programistów Twojej przeglądarki, albo twórcy Twojego szablonu. Jak więc dodać własną czcionkę do Twojej strony? Weźmiemy pod uwagę dwa sposoby.
Jak dodać Google Fonts z pomocą wtyczki.
Pierwszy i najłatwiejszy sposób, to użycie odpowiedniej wtyczki. To powinien być Twój wybór, jeśli nie czujesz się na siłach, żeby edytować pliki motywu. Wtyczka jest bardzo prosta w obsłudze i pozwoli Ci zobaczyć zmiany na żywo, bez kodowania. Wybrałem dla Ciebie Easy Google Fonts, bo jest wysoko oceniana przez społeczność i daje Ci wybór spośród ponad sześciuset czcionek.
Po instalacji wtyczki konfiguracja sprowadza się do kilku prostych kroków. Przejdź do zakładki Wygląd->Personalizacja. Znajdziesz tam nową zakładkę Typography. Kiedy do niej przejdziesz, powinieneś zobaczyć listy wyboru dla elementów takich jak paragrafy, czy nagłówki. Wystarczy teraz tylko wybrać dla każdego z elementów rodzaj czcionki, oraz inne właściwości takie jak podkreślenie, czy wielkość liter. Wprowadzane zmiany powinny być widoczne na żywo w oknie podglądu z prawej strony. Nie zapomnij na koniec zapisać zmian przyciskiem Opublikuj.
Ręczne dodanie czcionki do strony WordPressa.
Drugi sposób jest bardziej ambitny. Pokażę Ci jak dodać własną czcionkę poprzez skopiowanie kawałka kodu do odpowiedniego pliku. Skąd wziąć darmową czcionkę? Po prostu wejdź na stronę Google Fonts i wyszukaj taką, która Ci się spodoba. Pamiętaj tylko, żeby sprawdzić, czy poprawnie wyświetla polskie znaki diakrytyczne.
Następnie naciśnij znak + (select this font) przy każdej czcionce, która Ci się podoba. Spowoduje dodanie jej do Twojej listy. W dole ekranu pojawi się okno z wybranymi przez Ciebie czcionkami.
W tym oknie znajdziesz kawałek kodu, który będziesz musiał dodać w nagłówku swojej strony.
Chodzi dokładnie o poniższą linijkę…
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
…którą skopiujesz do pliku header.php w sekcji <head>. Możesz to zrobić w edytorze motywów w Kokpicie WordPressa. Po zapisaniu zmian, Twoja czcionka będzie się już ładować podczas wczytywania strony. Teraz wystarczy tylko użyć jej w odpowiednim miejscu. Musisz znów użyć edytora i zmodyfikować plik css (najczęściej style.css), na przykład w ten sposób:
body {
font-family: 'Open Sans', sans-serif;
}
Taki zapis spowoduje, że na całej stronie zostanie użyta czcionka Sans Serif. W tym samym pliku zdefiniujesz także rozmiar, albo pochylenie czcionki dla odpowiednich elementów na stronie. To jednak będzie wymagało znajomości podstaw CSS.
Rzadziej stosowany sposób na własną czcionkę na stronie to edycja pliku functions.php WordPressa. W tym celu po prostu dodaj na końcu pliku podobny kod:
function poradywp_google_fonts() {
wp_register_style('googleFonts', 'https://fonts.googleapis.com/css?family=Open+Sans');
wp_enqueue_style( 'googleFonts');
}
add_action('wp_print_styles', 'poradywp_google_fonts');
Dodam jeszcze, że nie zalecam modyfikacji plików w oryginalnym motywie. Lepiej użyć w tym celu motywu potomnego. Jeśli nie wiesz jak to zrobić, to śledź moje wpisy. Opiszę wkrótce do czego służy motyw potomny i jak go używać.
*prawidłowo krój pisma