font-family: "..."
, którą nadajemy danemu elementowi w pliku CSS. Dokładniejszy opis jak to zrobić znajdziecie poniżej.font-family
. W punkcie 4. na stronie Google Fonts znajdziemy nazwę fontu, którą trzeba zastosować.'Playfair Display', serif;
i dlaczego występuje tam nazwa serif
? Otóż jeśli nie zostanie znaleziony font o nazwie 'Playfair Display'
(np. nie dołączymy do naszego kodu skryptu ze strony Google Fonts), to przeglądarka wyświetli dowolny, dostępny font szeryfowy właśnie dzięki wartości serif
. Deklarację możemy też rozbudować o większą liczbę krojów, np.font-family
w narzędziach developerskich. Czy zaobserwowaliście zmianę fontu?
Exercise::Ćwiczenie 9Pora na podłączenie pozostałych dwóch fontów do naszego layoutu.Jakie to fonty? Możesz sprawdzić to za pomocą programu graficznego, który otwiera pliki.psd
(Photoshop), jednak dla ułatwienia przygotowaliśmy dla Ciebie informacje o rodzajach fontów w pliku tekstowym.Taki plik znajdziecie w folderach z zasobami dla każdego layoutu pod nazwąinfo.txt
.Uwaga – renderowanie fontów może nieco różnić się w zależności od przeglądarki, więc nie przejmuj się na razie, jeśli u Ciebie fonty wyglądają na "cieńsze" lub "bardziej tłuste". Pomińmy też na tym etapie wielkości fontów.