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.
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.
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
- Zainstaluj i aktywuj wtyczkę
- Przejdź do Wygląd > Dostosuj. W tym miejscu pojawi się teraz opcja Typografia, której nie miałeś wcześniej.
- Ustaw czcionkę
- 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.
Dodaj wybraną czcionkę za pomocą ikonki „+”.
W prawym dolnym rogu pojawi się okienko, kliknij @import:
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.
Następnie przejdź do zakładki „EMBED” i skopiuj kod:
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.
Najlepsze czcionki Google Fonts
- 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.
- 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ą.
- Lora – Lora to popularna czcionka szyfrowa (serif) zaprojektowana tak, aby wyglądała dobrze zarówno na ekranie, jak i na wydruku.
- Open Sans – to czcionka bezszeryfowa opracowana przez Steve’a Mattesona. Google używa Open Sans na niektórych swoich stronach internetowych.
- 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.
- Montserrat – to czcionka bezszeryfowa autorstwa Juliety Ulanovsky. Z 18 różnymi stylami masz całkiem duży wybór.
- Raleway – Czcionka z 18 różnymi stylami, Raleway to wielkoformatowa czcionka bezszeryfowa, początkowo stworzona przez Matta McInerneya.
- Concert One – to zaokrąglony krój pisma, który świetnie nadaje się na nagłówki.
- Work Sans – czcionka bezszeryfowa zoptymalizowana do użytku na ekranach. Projektanci zalecają stosowanie stylów średniej wielkości od 14px do 48px. Niestety brak polskich znaków.
- 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!
