Google Fonts – Jak korzystać z czcionek w WordPress?

Share on facebook
Share on twitter
Share on linkedin
Share on google

Chcesz aby Twoja strona była wyjątkowa? Chcesz wyrazić swój styl na blogu? Uważasz, że standardowe czcionki są nudne? Użyj fenomenalnego narzędzia Google Fonts i spraw, aby Twoja strona była unikatowa!

Większość osób nie zastanawia się nad czcionką używaną na swojej stronie internetowej. To błąd! Jeśli treść stanowi większość strony, zmiana czcionki daje niesamowite rezultaty. Warto zadbać o to, aby była przedstawiona w przejrzysty sposób. Odpowiednio dobrana czcionka zdecydowanie wpływa na czytelność, a to bezpośrednio przekłada się na statystyki.

Zatem jeśli edytujesz motyw lub tworzysz własny to powinieneś skupić się na wyborze odpowiedniej czcionki.

Co to jest Google Fonts?

Google fonts to ogromny zbiór ponad 1000 czcionek dla projektantów stron internetowych. Dodatkowo wszystkie są open source.

Google Fonts

Projektanci którzy tworzą czcionki muszą przejść przez weryfikację i ta dopiero wtedy trafia do katalogu Google.

Historia typografii

Google Fonts to usługa, w której Google zapewnia każdemu dostęp do bezpłatnej typografii internetowej. Aby w pełni zrozumieć dlaczego to takie ważne cofnijmy się nieco w czasie.

Wcześniej nie było żadnych niestandardowych czcionek dla stron internetowych, a wyświetlany tekst zależał od przeglądarki internetowej.

Później webmaster uzyskał do pewnego stopnia kontrolę typografii. Były one jednak w większości ograniczone do kilku podstawowych czcionek, które musiały zostać zainstalowane na komputerze użytkownika, aby działały.

Wraz z pojawieniem się CSS2 zakres opcji został poszerzony. CSS2 zezwalał przeglądarkom internetowym na pobieranie czcionek do przeglądarki.

Google Fonts zdecydowanie uprościło sprawę, ponieważ czcionki są dostępne bezpośrednio z katalogu Google i będą działać na każdym komputerze z dowolną przeglądarką.

Jak skorzystać z Google Fonts na swojej stronie?

W wielu motywach WordPress jest opcja ułatwiająca zmianę czcionki. Wystarczy przejść do Wygląd > Dostosuj, a następnie w zakładce Typografia wybrać czcionkę i odpowiednio ustawić rozmiar nagłówków, akapitów itp.

Typografia google fonts

Jeżeli w Twoim motywie brakuje takich opcji to żaden problem. Bez problemu możesz dodać Google Fonts ręcznie.

Jak dodać Google Fonts do WordPress za pomocą wtyczki?

Najprostszym sposobem na zainstalowanie niestandardowych czcionek z Google Fonts jest użycie wtyczki Google Fonts Typography

Google Fonts Typography

  • Zainstaluj i aktywuj wtyczkę
  • Przejdź do Wygląd > Dostosuj. W tym miejscu pojawi się teraz opcja Typografia, której nie miałeś wcześniej.

Typografia

  1. Ustaw czcionkę
  2. Zapisz

Pamiętaj, że użycie zbyt wielu wtyczek na Twojej stronie może bardzo wpłynąć na wydajność. Warto zatem użyć innego motywu lub zmienić czcionkę ręcznie.

Jak dodać Google Fonts bez użycia wtyczek?

Aby ręcznie dodać niestandardowe czcionki będziesz potrzebował utworzyć motyw potomny. Bezpośrednia edycja plików motywu jest niewłaściwa, ponieważ każde zmiany które wprowadzisz znikną po aktualizacji motywu.

Ta opcja jest nieco bardziej skomplikowana dla początkujących, ale postaram Ci się to opisać krok po kroku.

Co to jest motyw potomny?

To taki motyw, który jest motywem podrzędnym i dziedziczy wszystkie funkcje motywu nadrzędnego. Za pomocą takiego motywu możesz w bezpieczny sposób go modyfikować nie ingerując w ogóle w pliki głównego motywu. Kiedy zaktualizujesz motyw, zmodyfikowane dane w motywie potomnym zostaną zachowane i zastosowane w aktualnej wersji. Zamiast bezpośrednio modyfikować pliki motywów, możesz je zastąpić szablonami w motywie potomnym.

Jak stworzyć motyw potomny?

Na potrzeby tego poradnika użyjemy motywu o nazwie Twenty Nineteen

Logowanie FTP

Pierwszym krokiem jaki musisz wykonać to zalogować się za pomocą FTP na swój hosting. Następnie przejdź do folderu /wp-content/themes/

Stwórz nowy katalog

Nazwijmy go na przykład: newfont

Utwórz plik style.css

W katalogu newfont utwórz plik style.css z taką zawartością:

/*
Theme Name: New Font
Template: twentynineteen
*/

@import url("../twentynineteen/style.css");

Na początku mamy blok z komentarzem zamkniętym w znacznikach “/*” i “*/” . Theme Name informuje o nazwie nowego motywu potomnego:

Theme Name: New Font

Linia kolejna mówi o tym, że nowy motyw ma dziedziczyć od Theme Nineteen, podaj nazwę folderu w którym znajduje się motyw:

Template: twentynineteen

Ostatnia linia to miejsce w którym WordPress ma załadować style CSS z motywu nadrzędnego:

  
@import url("../twentynineteen/style.css");

W tym momencie utworzyłeś motyw potomny i możesz go już włączyć w kokpicie Wygląd > Motywy > newfont. Aktualnie zauważysz, że nic się nie zmieniło, ponieważ nie wprowadziłeś jeszcze żadnych zmian w motywie potomnym.

Skopiuj kod z Google Fonts do style.css

W tym celu udaj się na stronę Google Fonts i wybierz czcionkę najlepiej pasującą do Twojej strony internetowej. Możesz wpisać dowolny tekst, aby zobaczyć efekty. Ja wybrałem czcionkę Roboto.

Edycja Google Fonts

Dodaj wybraną czcionkę za pomocą ikonki “+”.

Dodaj czcionkę

W prawym dolnym rogu pojawi się okienko, kliknij @import:

Importuj czcionkę

Teraz wybierz odpowiednie grubości, których będziesz używał w swojej witrynie, ja wybrałem 300, 400 i 700. Nie wybieraj zbyt wielu opcji, ponieważ może do wpłynąć na wydajność strony.

Wybór czcionek

Następnie przejdź do zakładki “EMBED” i skopiuj kod:

Skopiuj kod z Google Fonts

Wklej do pliku style.css skopiowany kod z Google Fonts. Cały kod style.css powinien wyglądać tak:

/*
Theme Name: New Font
Template: twentynineteen
*/

@import url("../twentynineteen/style.css");
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,700&display=swap');,bolditalic&subset=latin);

body, input, textarea {
 font-family: 'Roboto', Arial, Helvetica, sans-serif;
}

Następnie utwórz plik functions.php i wklej w nim poniższy fragment – plik również musi się znajdować w folderze motywu potomnego.

<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
 
}
?>

Możesz teraz włączyć nowy motyw i zauważysz zmianę czcionki na Roboto. Takim sposobem uruchomiłeś motyw potomny, który możesz dowolnie edytować. W razie problemów możesz swobodnie przełączyć na oryginalny.

Aktywuj motyw potomny

Najlepsze czcionki Google Fonts

  1. Lato – to czcionka zaprojektowana przez Łukasza Dziedzica w 2010 roku. Należy do rodziny pisma bez szyfrowego (Sanserif) – końcówki znaków są proste. Początkowo została ona zaprojektowana dla klienta korporacyjnego, ale oficjalnie font ten został udostępniony na otwartej licencji Open Font License. Używam ją również na tej stronie.
  2. Roboto – to bezszeryfowy krój pisma Christiana Robertsona opracowany przez Google jako czcionka systemowa dla Androida. Jest teraz bardzo popularny, występuje w 12 różnych stylach i wielokrotnie pojawia się w analityce Google Fonts. Roboto jest najpopularniejszą czcionką.
  3. LoraLora to popularna czcionka szyfrowa (serif) zaprojektowana tak, aby wyglądała dobrze zarówno na ekranie, jak i na wydruku.
  4. Open Sans – to czcionka bezszeryfowa opracowana przez Steve’a Mattesona. Google używa Open Sans na niektórych swoich stronach internetowych.
  5. Source Sans Pro – Source Sans Pro to czcionka bezszeryfowa autorstwa Paula Hunta, która została stworzona dla Adobe i była pierwszą czcionką Adobe typu open source.
  6. Montserrat to czcionka bezszeryfowa autorstwa Juliety Ulanovsky. Z 18 różnymi stylami masz całkiem duży wybór.
  7. Raleway – Czcionka z 18 różnymi stylami, Raleway to wielkoformatowa czcionka bezszeryfowa, początkowo stworzona przez Matta McInerneya.
  8. Concert One –  to zaokrąglony krój pisma, który świetnie nadaje się na nagłówki.
  9. Work Sansczcionka bezszeryfowa zoptymalizowana do użytku na ekranach. Projektanci zalecają stosowanie stylów średniej wielkości od 14px do 48px. Niestety brak polskich znaków.
  10. Prompt –  to bezszeryfowa czcionka od tajlandzkiej firmy zajmującej się projektowaniem komunikacji, Cadson Demak.

Twoje ulubione czcionki

Jakie są Twoje ulubione czcionki z Google Fonts? Napisz w komentarzu!

Dodaj komentarz

Witryna wykorzystuje Akismet, aby ograniczyć spam. Dowiedz się więcej jak przetwarzane są dane komentarzy.

Scroll Up
Wordpress - Szybki start

Zgarnij darmowego ebooka!

Zapisz się i odbierz ebooka – Dochodowy Blog – Szybki Start

Ta strona korzysta z plików cookie, aby zapewnić najlepszą jakość korzystania z naszej witryny. Więcej dowiesz się w polityce prywatności. Czy zgadzasz się na wykorzystywanie ciasteczek?