Tailwind CSS: Konfiguracja własnych fontów w projekcie

0:00I teraz, żeby skorzystać z tego fonta, który mamy tutaj,

0:02jest to font chomsky.

0:06Jest to darmowy font, który będziesz miał dołączony do materiałów z tego kursu.

0:10Wszystkie fonty, które musisz sobie

0:11zainstalować lokalnie w swoim systemie, żeby widzieć to samo co ja na ekranie

0:15dołączę w materiałach dodatkowych do tego kursu.

0:18Dlatego ściągnij sobie teraz materiały i

0:20zainstaluj sobie ten font o nazwie chomsky i pokaże Ci teraz jak możesz sobie

0:26rozszerzać paletę fontów frameworku Tailwind, bo Tailwind domyślnie

0:31jeżeli chodzi o font family mamy trzy

0:33wartości, czyli jest font sans, font serif i font mono.

0:37Może powiększę sobie troszeczkę ten ekran, żebyś wiedział lepiej.

0:40To są jakby trzy wartości, z których już możemy korzystać.

0:43Nie musimy nic robić. I w tym momencie są z góry nadane pewne wartości

0:47fontów, które są nadane poprzez framework Tailwind i będą nadane naszym napisom.

0:52Jeżeli sobie wejdziemy teraz w index html,

0:54przejdziemy sobie z powrotem na naszą stronę.

0:57Popatrz, wezmę sobie teraz tutaj i powiemy font mono.

1:01No i już widzimy, że CSS, który zostanie

1:02nadany to jest coś takiego - font family monospace.

1:05I tu mamy domyślny fonty Menlo, Monaco, Consolas, Libera, Courier, monospace.

1:11I to co mamy w systemie oznaczone jako monospace zostanie zaaplikowane.

1:16I w tym momencie nasz design widzisz, że jest font zmieniony na mono.

1:21Jeżeli sobie damy sans w naszym przypadku mamy font sans.

1:25Jeżeli sobie damy serif

1:27taki bliżej naszemu naszemu fontowi, który będziemy potrzebować

1:31finalnie to mamy taki fajny font, który generalnie wykorzystuje się czy w

1:35publikacjach drukowanych, czy właśnie w gazetach internetowych.

1:38Natomiast usuńmy sobie tę opcję, bo my chcemy

1:41rozszerzyć paletę naszych fontów o nasz customowy foncik, który sobie przed

1:45chwilą zainstalowaliśmy w systemie i jak to można zrobić?

1:48Otóż wchodzimy sobie w theme extend

1:51i tutaj masz obiekt, dzięki któremu można sobie rozszerzać pewne właściwości.

1:56Szukając font,

1:58mamy fontFamily i tutaj możemy sobie dodatkowo dopisywać style

2:03dla fontów, które chcemy używać w naszym projekcie i możliwości rozszerzenia

2:07tutaj takiego projektu jest kilka.

2:10My tutaj korzystamy z Tailwind CLI, dlatego

2:12nie mamy żadnego frameworka zainstalowanego.

2:14Nie musimy sobie tych fontów ekstra

2:17wrzucać do folderu public, żeby je ładować

2:19później za pomocą styli. Możemy tak naprawdę na potrzeby naszego kursu, tutaj

2:23developmentu, wykorzystać fonty, które mamy dostępne już w naszym systemie.

2:27Dzięki temu, że zainstalowałeś sobie ten

2:29plik, który dostałeś wraz z materiałami dodatkowymi,

2:32możemy sobie tutaj stworzyć nową rodzinę fontów o nazwie chomsky.

2:36Tutaj wpiszemy nazwy chomsky.

2:39Zapiszemy to sobie. I już

2:40w tym momencie, jeżeli przejdziemy do pliku indexhtml,

2:44jeżeli masz poprawnie zainstalowany ten

2:47font w swoim systemie, to jeżeli zaznaczymy sobie ten header, wejdźmy sobie

2:52tutaj do środka i zaznaczmy sobie tą H1, chcemy zmienić jej font.

2:57Czyli zróbmy sobie class,

2:59font i zobacz, że już pojawił się w moim intellisense font chomsky.

3:04To jest nowy styl, nowa klasa, która pojawiła się dzięki temu,

3:08że rozszerzyliśmy możliwości naszego frameworka poprzez dodanie dodatkowej,

3:14dodatkowego fontu, dodatkowej rodziny fontów, z której chcemy korzystać w naszym

3:17projekcie. Zaznaczymy sobie, że chcemy użyć właśnie tego fontu.

3:20Zapiszemy to i już powinniśmy widzieć,

3:23jeżeli masz dobrze zainstalowany font w swoim

3:25systemie, powinieneś widzieć właśnie to, co ja widzę na ekranie, czyli podobny

3:29font, praktycznie ten sam font, który mamy tutaj.

3:31Natomiast tutaj jeszcze są powiększone odległości między literami.

3:34I teraz właśnie sobie to zrobimy.

3:36Musimy sobie spojrzeć na chwilkę do dokumentacji letter spacing.

3:42Do tego mamy klasę tracking i wybierzemy sobie tracking-wide.

3:48Dla przykładu to jest 0,25em,

3:50powinno wystarczyć w naszym przypadku.

3:54Zapiszemy sobie to i wróćmy do naszej strony tutaj.

3:59Zobaczmy czy wider będzie wyglądało,

4:01wider jednak wygląda troszeczkę lepiej i praktycznie udało nam się odwzorować tutaj

4:05ten header, który mamy od naszego designera.

4:07Dlatego teraz możemy sobie spokojnie przejść do budowania tej pierwszej sekcji,

4:14gdzie mamy jeden główny news na naszej stronie, na widoku mobilnym.