Webflow: Import fontów

Webflow 2020+

0:00Witaj w kolejnej lekcji i znów jesteśmy

0:01dokładnie w tym miejscu w którym skończyliśmy poprzednio i teraz chciałbym

0:04mówić trochę o fontach będziemy musieli skonfigurować fonty na naszą stronę a w

0:08samym designerze webflow nie mamy możliwości wyboru z jakiejś bardzo dużej

0:14gamy fontów jeśli przejdziemy do designera z powrotem i teraz klikniemy np.

0:18na sekcje body po to żeby przejść do sekcji typografii.

0:22To zobacz że mamy do dyspozycji tylko

0:24bardzo podstawowe fonty w momencie gdy będziemy chcieli je dodać.

0:28Wybieramy polecenie add fonts znajdziemy się dokładnie w tym samym miejscu gdzie

0:31byliśmy przed chwilą czyli w sekcji font ustawień.

0:34Mamy tutaj do wyboru trzy opcje.

0:36Możemy dołączyć dowolne google font

0:38i jest to naprawdę świetna opcja bo google fontów jak wiesz jest mnóstwo

0:43pokazywałem ci jak z nimi projektować i nasz projekt właśnie zawiera google fonty.

0:46Możemy teraz przeglądać stąd ich listę i wybrać sobie front który chcemy dołączyć

0:51do projektu zostanie automatycznie dołączony do listy fontów w webflow.

0:54Druga opcja to możliwość skorzystania z

0:56Adobe fonts jeżeli masz subskrypcję na Adobe fonts bądź tam kupisz sobie fonts z

1:00którego chcesz korzystać to w ustawieniach Adobe fonts na tej stronie z której stąd

1:04zostaniesz przekierowanie możesz znaleźć tak zwane api token .

1:09Ten api token tutaj wklejasz i masz też

1:11dostęp do wszystkich fontów które zamknie w sobie w jakimś projekcie Adobe fonts.

1:15Trzeci sposób jaki najbardziej można powiedzieć ryzykowne i najbardziej

1:20pracochłonny to korzystanie z custom fontów.

1:22Czyli możesz zrobić z dowolnego fontu który np.

1:25masz zainstalowany w systemie.

1:26Możesz eksportować go przykładowo za pomocą serwisu font squirrel.com

1:31do formatu TT od TTF do formatów web owych, a następnie to zauploadować.

1:36Jednak w takiej sytuacji polecam Ci bardzo dokładnie przeczytać zapisy licencyjne

1:40dotyczące tego fonta bo wiele wątków komercyjnych nie wyraża zgody w Licencji

1:45na to żeby korzystać z nich w tym formacie i w ten sposób więc dla nas

1:49najbezpieczniejsze opcję jednocześnie ta z której skorzystamy.

1:52To są google fonts i będziemy korzystali z fontów dm.

1:57To są fonty które są w rodzinie dm sans i

2:01dm sherif display czyli będziemy korzystali z tych konkretnie dwóch.

2:05Jak dodać dwa najpierw dodajemy GM Sans

2:08i w jakim chcemy w wariancie uwzględnić tę fonty.

2:12Na razie uwzględnie wszystkie warianty aczkolwiek jest to ważne aby wybrać

2:17dokładnie te warianty które znajdują się w naszym projekcie i nie więcej.

2:21Jeśli tylko możemy nie zaimportować więcej

2:23dlatego że one zwiększą czas ładowania naszej strony.

2:26Dodatkowo jeżeli tworzymy stronę z

2:28polskimi ogonkami koniecznie musimy zaznaczyć opcję latin extended.

2:32Ja akurat będę tworzył stronę która treść

2:35jest po angielsku więc zostawiam samą latin i wybieram polecenie add font.

2:39Dodaliśmy w tym momencie dm sans.

2:40Możemy w każdej chwili go usunąć.

2:42Możemy w momencie gdy zorientujemy się że

2:45nie używamy wszystkich typów tego kroju pisma wszystkich jego wariantów możemy też

2:49usunąć i dodać ponownie tylko te z których będziemy korzystać.

2:53Drugim faktem który dodam jest dm sherif display .

2:56I tutaj mam tylko dwa warianty nie

2:58zaznaczam na tym extended nie będę go potrzebował.

3:00No i to wszystko.

3:02Teraz mogę już z powrotem przejść do designera.

3:04Wybieram polecenie designer i poza ładowaniu strony klikamy raz na tło mojej

3:08strony po to żeby dostać się do znacznika body.

3:11Jeśli nie jesteś pewien czy jest zaznaczone kliknij w nawigator, a

3:14następnie upewnij się że body jest tutaj podświetlany na niebiesko wtedy będziesz

3:18miał do dyspozycji zakładkę stylów dla znacznik body i jest niezwykle ważne żeby

3:24w sekcji typography teraz ustawić domyślny tekst.

3:28Stąd możemy wybrać sobie już font dm sans

3:31czy dm sherif display natomiast jedna bardzo istotna rzecz.

3:35Być może zauważyłeś że niektóre

3:37właściwości bo jest to nic innego jak właściwości CSS i odpowiadające im

3:41wartości są podświetlane na pomarańczowo, takie pomarańczowe tło.

3:46Taką właściwość możemy kliknąć i okaże się że dla takiego elementu którym mamy

3:51zaznaczone ta właściwość elementu body jest skądś dziedziczona.

3:56Czyli jeżeli mamy jakąś klasę CSS-ową która wpływa na to jak body wyświetla

4:03fonty w tym przypadku wyświetla fontem arial.

4:06To ta właściwość zostanie zaznaczona na pomarańczowo.

4:09Możemy w nią kliknąć i możemy zobaczyć skąd ta wartość jest dziedziczona.

4:14W tym przypadku jest ona dziedziczona, a z czegoś takiego jak Body all pages.

4:18Żeby to trochę lepiej zrozumieć należy

4:20zastanowić się w ogóle jak działa web flow w kontekście plików HTML, CSS.

4:24Więc wróćmy do podstaw.

4:26Mamy tutaj naszą stronę Home.

4:29Jest to tak jakby Home kropka HTML w tym

4:31samym katalogu może się znajdować Passport HTML, 404 HTML, a jak będziemy dodawać

4:36tutaj kolejne strony to będą następne HTML.

4:39One mają wszystkie jedną

4:42style CSS z których korzystają, a my możemy w ramach tych stylów tworzyć klasy.

4:46Te klasy będziemy mogli tworzyć samodzielnie np.

4:49wpisując nazwę klasy tutaj dodając taką

4:51klasę i ona będzie mogła zostać użyta na wszystkich podstronach naszej witryny

4:56którą tworzymy do tego żeby oscylować kolejne elementy.

5:00Tego że my sami tworzymy klasę jest

5:03tworzony też szereg klas które mogą opisywać HTML-owe tagi czyli np.

5:07wszystkie nagłówki na naszej stronie wszystkie listy albo np.

5:11wszystkie znaczniki body na wszystkich podstronach to jest taki dosyć specyficzny

5:15twór który pozwoli nam zaadresować wszystkie znaczniki body.

5:19Te znaczniki tagów są oznaczone kolorem różowym w przeciwieństwie do niebieskiego

5:24gdzie mamy tworzone przez nas klasy więc widzimy teraz, że ta właściwość jest

5:28dziedziczona z tych wszystkich stron dlatego jest na pomarańczowo.

5:31Gdybyśmy jednak zdecydowali się zmienić

5:33dla tego pojedynczego znacznika body na stronie home to ustawienie to zobaczy co

5:38się stanie w momencie gdy ja będę edytował to ustawienie to zmienia się to już na

5:42kolor niebieski dlatego, że automatycznie webflow stworzył dla nas klasę body którą

5:50jak gdyby nawet nadpisał te ustawienia które były w body dla all pages.

5:55Co to znaczy on zainspirował się czyli przeniósł wszystkie te rzeczy które są w

5:59body all pages one są dziedziczone ale nadto na górze utworzył jeszcze jedną

6:04automatycznie zresztą klasa body w której możemy sobie teraz wybrać np.

6:08dm sans to nie musi być body ona po prostu tak się nazywa.

6:11Możemy na to kliknąć i zmienić jej nazwę na jakąkolwiek chcemy

6:15i możemy zobaczyć teraz, że właśnie utworzyliśmy specyficzną klasę którą

6:21oscylowaliśmy znacznikiem body na stronie home.

6:24Nam natomiast na tym nie zależy.

6:26W związku z tym będziemy chcieli pozbyć się tej klasy.

6:29Możemy ją usunąć czyli wybrać polecenie np.

6:31remove clas i w tym momencie wróciliśmy do

6:34punktu wyjścia czyli mamy znowu to dziedziczone z Body all pages.

6:38W związku z tym zamiast indywidualna klasa

6:40dla tego konkretnego elementu body chcemy raczej edytować font dla body all pages.

6:45Jak to zrobić.

6:46Możemy to łatwo zrobić w ten sposób że klikniemy w to miejsce na sektory

6:51i wybierzemy właśnie body all pages które dostępne jest w tej sekcji HTML tag

6:57zobacz, że została tutaj też nasza klasa którą przed chwilą usunąłem.

7:01Ona została usunięta wyłącznie z tego

7:04przypisania body ale została dodana do tych globalnych naszych stylów.

7:07Gdybyśmy chcieli się jej pozbyć to

7:09wchodzimy w ustawienia style menadżer i wystarczy że klikemy w opcje clean up.

7:13To po prostu pozwoli usunąć wszystkie nieużywane nigdzie klasy.

7:18Wracam do stylów.

7:19Jeszcze raz wybieram Body all pages

7:22i w tym momencie jak widzisz mam już to na niebiesko dlatego że edytuje dokładnie to

7:27co mam zaznaczone tutaj czyli znacznik body dla wszystkich stron.

7:31I to jest bardzo ważne aby na samym

7:33początku nawet jeśli jeszcze dokładnie tego nie rozumiesz przełączyć się po

7:37prostu na body all pages i ustawić sobie tutaj ten nasz wyjściowy font w naszym

7:41przypadku będzie to dm sans i jego wielkość to osiemnaście wariant white to

7:47będzie bold natomiast interlinia wynosi dwadzieścia cztery piksele.

7:52Domyślny kolor również sobie tutaj zmienimy skopiuje sobie wartość

7:56szesnastkową z projektów xd, a następnie wklej ją tutaj i zatwierdzę tę zmianę.

8:01I właśnie tym sposobem dla wszystkich

8:03podstron naszej witryny globalnie dla wszystkich znaczników body ustaliliśmy

8:07dobrą wartość wyjściową jeśli chodzi o typografię w tym momencie gdy będziemy

8:11dodawać jakieś elementy zawierające typografie.

8:14Przykładowo akapit, paragraf.

8:16Zobacz że jest on automatycznie formatowy tym fontem.

8:19Gdybyśmy wcześniej dla znaczników Body wyłącznie na tej stronie nadpisali

8:23ustawienia gdzie webflow stworzył dla nas tą klasa body którą nazwaliśmy inaczej to

8:27wtedy ta klasa dziedziczyłaby ustawienia z all pages, a dodatkowo nadpisywała je

8:33swoimi ustawieniami i po dodaniu akapitu i wszystko byłoby dobrze.

8:36Na stronie home ale gdybyśmy się przenieśli na stronę 404 albo dodali sobie

8:40jakąś nową to tam nie mielibyśmy już tego napisanego musielibyśmy albo skorzystać z

8:46tej samej klasy którą otworzyliśmy dla body.

8:48Jeszcze raz napisać nią Body czy ustawić ją dla Body na każdej kolejnej stronie

8:53albo zdecydowanie lepiej zrobić tak jak teraz czyli skorzystać z tej wbudowanej

8:57klasy i w ten sposób ustawić domyślny font dla całej witryny.

9:01Zrozumienie tego mechanizmu pozwoli nam

9:03teraz ustawić dobrze jeszcze jedną właściwość mianowicie mogą w ogóle pozbyć

9:07się tego paragrafu zaznaczam go i wciskam backspace.

9:10Jeśli wrócę do body chciałbym też ustawić kolor tła dla całej mojej strony.

9:15No i gdybym teraz przeszedł do backgrounds i tutaj mam backgrounds color.

9:19Zobacz że kolor tła nie jest dziedziczone dlatego że po prostu ta właściwość nie

9:24została ustawiona wcześniej w klasie body all pages.

9:28Więc gdybym ja teraz zmienił kolor i wkleił sobie wartość szesnastkową do

9:33koloru niebieskiego zobacz że znowu została dla mnie utworzona automatycznie

9:38klasa body i znów będzie to dotyczyło tylko elementów które zawierają tę klasę

9:43więc gdybym przeszedł sobie na stronę 404.

9:46Dopóki na ten znacznik Body nie wrzuca klasy Body która też tutaj jest dostępna

9:52no to niestety nie będę miał niebieskiego tła więc znowu nie jest to

9:56to czego oczekujemy, potrzebujemy wrócić do strony.

10:00Chcąc usunąć ten znacznik body.

10:03Wybieramy teraz jako selector Body All pages.

10:06I to właśnie dlatego selectora chcemy zmienić właściwość background.

10:09A raczej w tym momencie nie tyle ją zmieniamy co w ramach tego sektora i on

10:14tworzymy została przypisana do tego właściwego tagu.

10:18Gdybyśmy udali się na stronę 404 i teraz przeszli do sekcji Body to zwróć uwagę na

10:24to że musimy wywalić tą klasę Body która została którą wcześniej przypisaliśmy.

10:28Teraz kolor jest dobry niebieski jest on dziedziczone z body all pages możemy

10:33przejść znowu do stylów i usunąć tę klasę Body która jest nam niepotrzebna.

10:38Wrócić na stronę Home i mamy dobrze skonfigurowane.

10:41Niebieskie tło oraz bazową wyjściową

10:44wielkość tekstu i kolor tekstu a tymczasem dla Body nie stworzyliśmy żadnych

10:48dodatkowych klas bo obserwowaliśmy na body all pages i dokładnie o to chodziło.

10:53Dziękuję ci za uwagę w tej lekcji.

10:55Mam nadzieję że to jest zrozumiałe proszę

10:56przećwiczyć to we własnym zakresie i do usłyszenia już za chwilę.