Tworząc swoją stronę lub blog na szablonach Elegant Themes, masz do wyboru wiele różnych czcionek. Możesz dowolnie używać ich podczas personalizacji nagłówków, menu, czy treści. Dotyczy to postów, stron czy projektów, które dodajesz za pomocą modułów, korzystając z pluginu The Divi Builder. Pomimo tego, że czcionek do wyboru jest wiele, zdarzają się sytuacje, w których brakuje nam jakiegoś fontu i chcemy dodać własny. Albo w jednym zdaniu chcemy wykorzystać dwie różne czcionki, a niestety tak się nie da za pomocą wbudowanych edytorów.

Skąd pobierać czcionki?

Czcionkę pobierzesz w wielu miejscach w Internecie. Ja korzystam głównie z tej strony, ale wystarczy, że w wyszukiwarce internetowej wpiszesz „font”, „fonts download” czy „fonts commercial use” i zajdziesz inne miejsca, w których dostępne są czcionki do pobrania. Wiele czcionek jest bezpłatnych, za niektóre trzeba zapłacić. Ważne, aby czcionka, którą pobierasz była przeznaczona do użytku komercyjnego, czyli do wykorzystania między innymi na stronie internetowej, czy w materiałach reklamowych. Pamiętaj, że czcionki oznaczone jako „darmowe do użytku osobistego” nie są przeznaczone do wykorzystywania ich w sposób komercyjny. Warto też zwrócić uwagę na to, aby czcionka była prosta i czytelna. Im więcej ogonków, zawijasów i innych ozdobników, tym większy problem z przeczytaniem będzie miał Twój czytelnik.

Jak dodać czcionkę i zmodyfikować style.css?

Krok 1: Pobierz (lub kup) czcionkę do użytku komercyjnego z wybranego przez siebie źródła i zapisz ją w dowolnej lokalizacji na komputerze.

Krok 2: Pobrany plik zapewne będzie w formacie .zip, więc wyodrębnij wszystkie pliki, np. przy pomocy darmowego programu WINRar.

Krok 3: Odpal Klienta FTP (dowolnie wybrany przez Ciebie program do zarządzania plikami na serwerze) i w szablonie child theme utwórz folder „fonts”. Jeżeli nie masz utworzonego motywu potomnego, to proponuję to zrobić, aby czcionki nie zostały usunięte przy najbliższej aktualizacji szablonu.

Krok 4: Do utworzonego folderu „fonts” wrzuć czcionkę, lub czcionki, którymi chcesz posługiwać się na blogu.

Krok 5: Otwórz plik „style.css” zlokalizowany w Twoim motywie potomnym (child theme) – zrobisz to za pomocą najprostszego edytora, tekstu – ja korzystam z Notepad++. W pliku „style.css” dodaj poniższy kod. Pamiętaj, aby zmienić nazwę czcionki [font-family: nazwa twojej czcionki;] i url [scr: url(‚fonts/pełna nazwa Twojej czcionki’);], a następnie zapisz plik. Ja wrzucam na serwer dwie czcionki, więc podaje dwa kody @font-face. Ty dodajesz tyle kodów, ile czcionek wrzucasz.

@font-face { 
font-family: nulshock-bd; 
src: url('fonts/nulshock-bd.ttf'); 
} 

@font-face { 
font-family: 
Fixation; 
src: url('fonts/Fixation.ttf'); 
}

Edycji pliku style.css możesz dokonać na dwa sposoby. Albo przez Klienta FTP, albo przez Panel WordPressa (boczny panel WP > Wygląd >Edytor > style.css. Samo dodanie powyższego kodu nie powinno spowodować żadnych zmian na Twojej stronie. Żeby dodana czcionka stała się widoczna, to konieczne będzie dodanie dodatkowych kodów CSS do pliku „style.css”, które powiedzą Twoim czcionkom, jak mają wyglądać w przypadku nagłówków, treści na stronie i akapitów. Dla każdego rodzaju możemy dodać określone parametry takie jak wielkość, kolor, formę wyświetlania (np. wielkie litery, małe itp.) czy rozmiar wysokości wierszy – można inaczej nazwać to interlinią.

Krok 6: Teraz musimy określić, jak ma wyglądać czcionka dla konkretnych treści. Na początku dodamy kod opisujący styl nagłówków. Mamy zdefiniowanych 6 różnych wielkości nagłówka (h1, h2, h3, h4, h5, h6) i dla każdego z nich dodamy określone parametry. To za co jest odpowiedzialny konkretny parametr – czyli część poniższego kodu, opiszę w tym poście, nieco później.

h1 {
font-family: nulshock-bd, Arial, sans-serif;
text-transform: uppercase;
font-size: 30px;
color: #3cadad;
font-weight: 500;
line-height: 1.2em;
}
h2 {
 font-family: nulshock-bd, Arial, sans-serif;
 text-transform: uppercase;
 font-size: 28px;
 color: #3cadad;
 font-weight: 500;
 line-height: 1.2em;
}
h3 {
 font-family: nulshock-bd, Arial, sans-serif;
 text-transform: uppercase; 
 font-size: 26px;
 color: #3cadad;
 padding-bottom: 10px;
 font-weight: 500;
 line-height: 1.2em;
}
h4 {
 font-family: nulshock-bd, Arial, sans-serif;
 text-transform: uppercase;
 font-size: 24px;
 color: #3cadad;
 font-weight: 500;
 line-height: 1.2em;
}
h5 {
 font-family: nulshock-bd, Arial, sans-serif;
 text-transform: uppercase;
 font-size: 22px;
 color: #3cadad;
 font-weight: 500;
 line-height: 1.2em;
}
h6 {
 font-family: nulshock-bd, Arial, sans-serif;
 text-transform: uppercase;
 font-size: 20px;
 color: #3cadad;
 font-weight: 500;
 line-height: 1.2em; 
}

Krok 7: Teraz dodamy kod odpowiedzialny za styl, czyli innymi słowy za wygląd akapitu. Dodamy bardzo podobny kod jak w przypadku nagłówków, jednak zmieni się selektor. Czyli kod rozpoczniemy nie od h1, h2, h3, h4, h5, czy h6 tylko od „p”.

p {
 font-family: Fixation, Arial, sans-serif;
 font-size: 16px;
 line-height: 1.9em;
}

Krok 8: Ostatnim etapem jest ustalenie parametrów pozostałych elementów na stronie. Zrobimy to za pomocą poniższego kodu:

body {
 font-family: Fixation, Arial, sans-serif;
 font-size: 14px;
 line-height: 1.7em;
 color: #000000
}

Reasumując

Wszystkie powyższe kody powinieneś umieścić w pliku style.css, a następnie zapisać plik. Jeżeli dodajesz kody przez panel WordPressa w edytorze to wystarczy je zapisać. Jeżeli robisz to przez Klienta FTP to zadbaj o to, aby plik ze zmianami umieścić na serwerze i poprawnie go zapisać. Po dodaniu kodów możesz nie widzieć zmian na stronie od razu. Wyczyść wtedy historię i usuń ciasteczka  (pliki cookies). Po odświeżeniu powinieneś zobaczyć nowe czcionki.

Jeżeli pomimo wyczyszczenia plików cookies nie zobaczysz zmian na stronie, po pierwsze upewnij się, że dodałeś prawidłowe kody, po drugie, że w ustawieniach szablonu, czy wpisu nie masz ustawionych innych czcionek. Co to dokładnie znaczy? Jeżeli w tym miejscu: Wygląd > Parametryzjacja > Ustawienia ogólne > Typografia w polu Czcionka nagłówka ustawisz jakąkolwiek inną czcionkę, niż Default Theme Font (czyli domyślan czcionka szablonu) to szablon nie wyświetli tej, którą dodałeś, a tą którą masz ustawioną właśnie w tym wspomnianym miejscu. Dla przykładu ja w Typografii określiłam, że moją czcionką dla nagłówka jest czcionka Play, więc pomimo tego, że dodałam swój kod @font-face nie zobaczę tej czcionki na swoim blogu. Dopiero kiedy zmienię te ustawienia na czcionkę domyślną, czyli na Default Theme Font to moje nagłówki będą wyświetlane z czcionką, którą dodałam za pomocą @font-face.

I podobnie będzie, jeżeli dodajesz jakąkolwiek treść za pomocą pluginu The Divi Builder. Jeżeli w ustawieniach modułu, który wybrałeś zmienisz czcionkę dla konkretnej wielkości nagłówka (h1, h2, h3, h4, h5, h6) czy akapitu, to na stronie nie pojawi się ta, którą dodałeś za pomocą @font-face.

Za co odpowiadają poszczególne style css użyte w regułach @font-face?

Wszystkie style, które wykorzystaliśmy powyżej są bardzo proste w użyciu i możliwe, że znasz wszystkie, albo chociaż część  nich. Jeżeli nie, to dobrze, żebyś je poznał, zapewniam Cię, że nie raz je wykorzystasz na swojej stronie.

font-family – to rodzina czcionek. W kodzie użyliśmy między innymi takiego zapisu: „font-family: Fixation, Arial, sans-serif;”. Poza dodatkową czcionką, którą wrzuciliśmy na serwer, do kodu dodaliśmy jeszcze nazwę czcionki Arial i rodzinę czcionek sans-serif. Zrobiliśmy to na wypadek, gdyby jakakolwiek przeglądarka miała problem z odczytaniem naszej czcionki Fixation. W miejscu, w którym my wpisaliśmy Arial, Ty możesz wpisać dowolną, wybraną przez siebie czcionkę, jednak najlepiej chyba wybrać najbardziej uniwersalną.

font-size – to rozmiar czcionki. Jak zauważyłeś dla każdego nagłówka, akapitu, czy w znaczniku body podaliśmy inne rozmiary. Ty możesz zamienić je również na dowolne, które będą Ci odpowiadały, możesz też użyć tych, które podaliśmy w kodzie. Masz tutaj dowolność.

color – określa kolor czcionki. Jeżeli nie wiesz jaki kolor wpisać, to przeczytaj wpis jak poznać i dobrać kolory w html. Pokazuję w nim gdzie szukać kolorów, skąd je brać itp.

font-weight – to kod odpowiadający za pogrubienie czcionki Twojego elementu, w naszym przypadku nagłówka. My ustawiliśmy pogrubienie z wartością 500 („font-weight:500;”), ale Ty możesz oczywiście zrobić to wg własnego uznania. Wartości jakich możesz użyć to: normal, bold, bolder lub lighter, albo możesz też użyć liczb np.: 200, 300, 600, 900 itp. Te wartości wpisujesz w miejscu, w którym my wpisaliśmy „500”

line-height – to innymi słowy interlinia – takie pojęcie chyba najłatwiej obrazuje tą wartość, ponieważ powinieneś ją kojarzyć np. z Worda. Ona określa wysokość między wierszami. W kodzie użyliśmy wartości 1.2em („line-height: 1.2em;”), ale najczęściej, jeżeli określamy wysokość między wierszami to podajemy dla niej wartość 1.7em lub 1.9em, ponieważ według nas jest ona najbardziej czytelna. Możesz wpisać dowolną i możesz też zamiast wartości „em”, użyć pikseli czyli „px”.

text-transform – odpowiada za wyświetlanie wielkości liter, a może nawet bardziej właściwym określeniem byłoby powiedzenie, że w ten sposób możemy przekształcić nasze litery. Mam tutaj na myśli wielkie litery, małe litery itp. My w swoim kodzie użyliśmy kodu: „text-transform: uppercase;”, co oznacza, że wszystkie nasze nagłówki będą wyświetlane WIELKIMI LITERAMI. Ale do wyboru jest jeszcze  inna opcja – wszystko zależy od tego, jak chcesz aby prezentowały się Twoje nagłówki. Możesz użyć jeszcze takich kombinacji:

  • „text-transform: uppercase; capitalize;” to sprawi, że Litery Pierwszych Wyrazów W Nagłówku Będą Pisane Wielkimi Literami.
  • „text-transform: lowercase;” to sprawie, że wszystkie litery nagłówka (czy innego elementu, do którego umieścimy kod) będą pisane małymi literami.
  • „text-transform: none;” – czyli brak jakiegokolwiek formatowania. Podanie takiego kodu sprawie, że nagłówek będzie się wyświetlał dokładnie tak, jak zapiszesz go w edytorze.
ZOBACZ CAŁY KOD POTRZEBNY DO DODANIA SWOJEJ CZCIONKI

Żebyś nie miał też żadnych wątpliwości, co do tego jak powinien wyglądać cały kod @font-face to zamieszczam go poniżej, ponieważ w powyższych przykładach został rozdzielony, aby opisać jego działanie. Cały ten kod – zmodyfikowany o Twoje dane – wrzucasz do pliku style.css.

@font-face { 
font-family: nulshock-bd; 
src: url('fonts/nulshock-bd.ttf'); 
} 

@font-face { 
font-family: 
Fixation; 
src: url('fonts/Fixation.ttf'); 
}

h1 {
font-family: nulshock-bd, Arial, sans-serif;
text-transform: uppercase;
font-size: 30px;
color: #3cadad;
font-weight: 500;
line-height: 1.2em;
}
h2 {
 font-family: nulshock-bd, Arial, sans-serif;
 text-transform: uppercase;
 font-size: 28px;
 color: #3cadad;
 font-weight: 500;
 line-height: 1.2em;
}
h3 {
 font-family: nulshock-bd, Arial, sans-serif;
 text-transform: uppercase; 
 font-size: 26px;
 color: #3cadad;
 padding-bottom: 10px;
 font-weight: 500;
 line-height: 1.2em;
}
h4 {
 font-family: nulshock-bd, Arial, sans-serif;
 text-transform: uppercase;
 font-size: 24px;
 color: #3cadad;
 font-weight: 500;
 line-height: 1.2em;
}
h5 {
 font-family: nulshock-bd, Arial, sans-serif;
 text-transform: uppercase;
 font-size: 22px;
 color: #3cadad;
 font-weight: 500;
 line-height: 1.2em;
}
h6 {
 font-family: nulshock-bd, Arial, sans-serif;
 text-transform: uppercase;
 font-size: 20px;
 color: #3cadad;
 font-weight: 500;
 line-height: 1.2em; 
}

p {
 font-family: Fixation, Arial, sans-serif;
 font-size: 16px;
 line-height: 1.9em;
 padding-bottom: 1em
}

body {
 font-family: Fixation, Arial, sans-serif;
 font-size: 14px;
 line-height: 1.7em;
 color: #000000
} 

 

Jak użyć dwóch różnych czcionek w jednym zdaniu?

Takiego zabiegu, jakim jest łączenie różnych czcionek w jednym zdaniu raczej nie będziesz wykonywał zbyt często, ale napiszę o nim, ponieważ to może być fajna forma na wyróżnienie jakiegoś zdania, słowa, czy frazy, albo po prostu uatrakcyjnienie jakiejś treści w Twoim wpisie. Żeby to zrobić otwórz edytor tekstowy (dodaj moduł „tekst” za pomocą The Divi Builder). Edytor ma dwie zakładki „Wizualny” i „Tekstowy”. Wybierz Tekstowy, a następnie wpisz następujący kod:

Twój dowolny tekst <span style=”font-family:’nazwa Twojej czcionki, którą wrzuciłeś na serwer przy pomocy @font-face’;”>Twój tekst, który ma być napisany inną, wyróżnioną czcionką</span> pozostała treść, zdania czy akapitu. U nas wygląda to tak:

kod w trybie tekstowym

Oczywiście poza tym, że dodaliśmy jakiś fragment tekstu wyróżnioną czcionkę, to możemy go dowolnie modyfikować, np. pogrubić, podkreślić, zmienić kolor, czy wstawić link. Ale do tego można już wykorzystać standardowe przyciski w edytorze, na zakładce „Wizualny”

kod w trybie wizualnym

A teraz do dzieła. Możesz wrzucać swoje czcionki do szablonów ET 🙂

Pin It on Pinterest