Wordpress: Własne fonty na stronie

0:00Cześć! Witaj w kolejnej lekcji, w której chciałbym pokazać Ci, jak możesz zainstalować na

0:04swoją stronę dowolny font, a następnie sformatować nim dowolny

0:08element motywu. Będziemy korzystać ze strony Google Fonts, aczkolwiek możesz

0:12znaleźć fonty na różnych innych stronach. Natomiast korzystanie z Google Fonts daje Ci

0:16ogromny wachlarz fontów, które możesz wykorzystać, jak również są

0:20to fonty darmowe do użycia na Twoich stronach. Więc polecam zacząć tutaj i możemy

0:25albo przeglądać fonty, które się tutaj znajdują, albo możemy wybrać

0:29opcję wyszukiwania. Polecam - jeżeli robisz blog w języku polskim - przykładowo

0:34wybrać sobie odpowiedni wariant, w naszym przypadku będzie

0:38to Latin Extended, po to, aby upewnić się, że fonty, z których będziesz korzystał,

0:42mają po prostu polskie ogonki. I wtedy możemy już zacząć wyszukiwanie

0:47poprzez właśnie wyświetlanie różnych krojów, czy to szeryfowych, bezszeryfowych,

0:51przeglądanie tych promowanych fontów. Albo jeżeli wiemy,

0:56jakiego fontu chcemy użyć - a ja akurat wiem, że będę korzystał z fontu Playfair - chcę

1:01po prostu wpisać tę nazwę czy zacząć ją wpisywać. I wybiorę teraz font

1:05Playfair Display. Jest to bardzo ładny font szeryfowy, który chciałbym wyświetlać

1:09również w nagłówkach mojej witryny. Więc wybieram polecenie Select this font. I

1:13teraz mam jedną rodzinę krojów pisma zaznaczoną. Będę jeszcze chciał przejść

1:17do opcji customizacji, ponieważ domyślnie jest tutaj wybrany tylko i wyłącznie font

1:21Regular. A ja chciałbym mieć jeszcze do dyspozycji i Bold, i Black. Jeżeli

1:26chcemy mieć polskie ogonki, musimy upewnić się, że mamy tutaj wsparcie Latin

1:30Extended wybrane, następnie przejdziemy do sekcji Embed. To, co musimy zrobić,

1:34to zaznaczyć ten standardowy kod do umieszczenia naszego

1:38fontu na stronie. Wybieram Cmd+C czy Ctrl+C, żeby go skopiować do schowka. I mam

1:43tu informację, że powinienem wpiąć ten font do sekcji head mojego

1:48dokumentu HTML, czyli mojej witryny. Okej, przejdźmy do wp-admina.

1:52Wyjdę teraz z tych opcji dostosowywania motywu, a następnie

1:57przejdę do Wyglądu i do Edytora. Mówiłem Ci o

2:01tym, że to tutaj znajdują się wszystkie pliki motywu. Rzecz jasna możesz też korzystać

2:05z Findera czy Eksploratora Windows po to, żeby je wyedytować, ale tutaj te edycje

2:09są dużo prostsze. To, co będziemy potrzebowali, to umieścić ten kod, czyli

2:13zainstalować ten font na wszystkich podstronach naszej witryny. Najłatwiej będzie to

2:17zrobić, korzystając ze strony nagłówka motywu, czyli z pliku header.php. Jeżeli kliknę na

2:22nagłówek motywu, wtedy będę mógł przejść do tej górnej części, która

2:27jest doklejana do każdej mojej strony, do wszystkich wpisów, postów i

2:31tak dalej. I to tutaj znajduje się właśnie sekcja head. Proponuję

2:35przejść teraz do tej sekcji head i możesz nawet na samej górze wkleić

2:39ten kod, który został skopiowany z Google Fonts. Następnie wybieram polecenie Zaktualizuj

2:44plik. Okej. Teraz już wróćmy do sekcji Dostosuj w Wyglądzie i

2:48będziemy chcieli przejść znów do Dodatkowy CSS, a następnie

2:52sformatować tym fontem Playfair wszystkie nasze nagłówki - te,

2:56które znajdują się tutaj. Więc wybieram polecenie inspekcji. Upewniam się tylko,

3:00bo mam tutaj już tę klasę wybraną - jest to klasa entry-title - i możemy

3:05właśnie z niej skorzystać, jeżeli chcielibyśmy sformatować wszystkie nagłówki h2 w ten

3:09sposób, też możemy to zrobić, zamiast klasy entry-title, po prostu korzystając

3:13bez kropki z zaadresowania wszystkich tagów w HTML-u h2. Więc

3:19możemy to zrobić alternatywnie. I teraz spróbujmy zastosować kod

3:23CSS, który nam to sformatuje fontem, który powinien być już zainstalowany na naszej stronie. I

3:27też Google tłumaczy, jak to zrobić: Użyj specyficznego kodu CSS, czyli

3:32po prostu skopiujemy sobie to font-family Playfair Display i to

3:36już powinno zadziałać, jeżeli wkleimy to do tej sekcji CSS. Jak widzisz, bardzo

3:40ładnie został sformatowany już ten nagłówek. Możemy rzecz jasna teraz

3:44trochę go zmniejszyć, powiększyć - w zależności od tego, jak ten font się dla Ciebie prezentuje.

3:48Myślę, że jest okej. W ten sposób sformatowaliśmy wszystkie nagłówki h2

3:52tym fontem. Gdybyśmy chcieli sformatować też inne nagłówki, takie jak h3, h4 i

3:56inne, możemy to zrobić nawet w jednej linii tutaj, podając

4:01ich nazwy po przecinku, czyli h2, h3, h4. Nawet

4:06możemy sformatować h5 i w sumie też możemy sformatować h1. Czyli już

4:11będziemy mieli teraz wszystkie nagłówki na pewno tym fontem Playfair Display. Zobacz, że te h4 są

4:15też już odpowiednio sformatowane. No i to jest wszystko, co chciałem

4:19pokazać Ci w kontekście własnej instalacji fontów Google. Ale

4:23gdyby to było dla Ciebie zadanie za trudne, to możesz spróbować też

4:27skorzystać z pluginu. Opublikuję teraz tę zmianę i pokażę Ci szybko,

4:31jak można z pomocą wtyczki doinstalować taki font. Cóż, w zasadzie

4:36lepiej, jeżeli potrafimy coś zrobić bez wtyczki, lepiej jest to na ogół zrobić bez

4:40wtyczki, ale w tym przypadku możemy też wyszukać sobie taką wtyczkę Easy

4:45Google Fonts. Jest to bardzo

4:49prosta mała wtyczka, która pozwoli nam zainstalować właśnie dowolny font z Google'a. Wybieram

4:54polecenie Instaluj i aktywuję tę wtyczkę. Po jej aktywacji

4:58nawet nie przechodzę do ustawień tej wtyczki, a prosto do Wyglądu i z powrotem

5:02do sekcji Dostosuj. Znajduje się tutaj nowa sekcja Typography,

5:06która została dodana właśnie przez tą wtyczkę. Mamy na razie Default Typography,

5:11przechodzimy do tej sekcji domyślnej i możemy teraz sformatować dowolnym

5:15fontem wszystkie elementy na naszej stronie, na przykład dla paragrafów, dla

5:19akapitów tekstu. Wybierzmy polecenie Edit Font. Mamy tu trzy zakładki: Appearance, Position

5:24oraz Style. Jeżeli potrzebujemy polskich ogonków, wybieramy tutaj polecenie Latin

5:28Extended. I teraz jesteśmy w sekcji Font Family, gdzie możemy wybrać sobie dowolny

5:33font. Są tutaj wszystkie fonty, które znajdziesz na Google Fonts, więc

5:37możesz przeglądać sobie fonty, wybrać ten, który najbardziej Ci odpowiada. I po

5:41zastosowaniu takiego fonta, możemy jeszcze, jeżeli ma on dostępne style typu pogrubiony

5:45czy pochylony, wybrać je, jak również jakieś ewentualnie transformacje, czyli

5:50przekształcenie na wielkie litery, małe czy pochylenie oraz dekoracje tekstu, czyli

5:55przykładowo podkreślenie dla całego tekstu. Nie będziemy tego robić. Możemy

5:59też w sekcji Appearance wybrać inny kolor dla fontu,

6:03czyli wszystkie akapity zmienią nam w tym momencie kolor, na przykład na taki zielony.

6:07Możemy też zmienić rozmiar fontu, interlinię, odstępy między literami i

6:11możemy zmienić pozycje, takie jak marginesy, paddingi... masę rzeczy możemy tutaj dostosować z pomocą tej

6:16wtyczki. Jeżeli chcemy przywrócić zmiany do oryginalnych, wybieram po prostu

6:20polecenie Reset. To samo możemy zrobić nie tylko dla akapitów, ale i dla

6:24nagłówków każdego typu, i wybrać dla nich własny font. Czy

6:29warto w ogóle tak robić? No, myślę że nie, dlatego że po pierwsze: znacznie utrudni

6:33to czytelność naszej strony. Powinniśmy raczej skłaniać się ku temu, aby mieć

6:37tylko, powiedzmy, dwa kroje pisma - jeden dla nagłówków, a drugi dla właściwego

6:41tekstu. Poza tym będą one i tak wyróżnione - częściowo pogrubieniami

6:45czy pochyleniami, więc i tak tych różnych wariantów danego kroju będzie

6:50kilka. Natomiast drugim obciążeniem jest po prostu czas

6:54ładowania naszej strony. Im więcej fontów dodamy, tym dłużej ta strona będzie się wczytywać, więc

6:58proponuję tutaj być zachowawczym. Jeśli chodzi o korzystanie

7:02z tej wtyczki - może nie będę zmieniał tutaj szablonu - to

7:06tak naprawdę szczerze mówiąc, myślę że instalacja własnego fontu z Google

7:10jest na tyle prosta - to, co pokazałem Ci w pierwszej części tej lekcji - i dzieje

7:14się tak naprawdę jednorazowo. Bo jak często zmieniamy fonty na stronie? Raczej

7:18tylko wtedy, kiedy tworzymy nowy serwis i definiujemy nowy motyw. W

7:23związku z tym ja tę wtyczkę sobie wyłączę. Chcę, żebyś wiedział, że ona istnieje. Jeśli

7:27nie poradzisz sobie z samodzielną instalacją lub chcesz zrobić to na skróty, możesz z niej spokojnie

7:31skorzystać. To wszystko w tej lekcji. Do usłyszenia!