> For the complete documentation index, see [llms.txt](https://the-awwwesomes-2.gitbook.io/tutorial-the-awwwesomes-html-and-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://the-awwwesomes-2.gitbook.io/tutorial-the-awwwesomes-html-and-css/the-awwwesomes-tutorial-www-beginners-5.md).

# Dołączanie fontów Google Fonts

Pora na chwilę oddechu – nauczymy się wreszcie dołączać inne kroje pisma.

Kolory i typografia niewątpliwie wpływają na charakter strony i to jak ją odbieramy. Na całe szczęście dołączanie różnych, niestandardowych krojów pisma stało się możliwe i całkiem proste, o czym zaraz się przekonacie.

Zanim jednak zaczniemy szukać odpowiedniego kroju, musimy pamiętać, że jedynie fonty zapisane w odpowiednich formatach będą renderowane w konkretnych przeglądarkach internetowych. Pamiętajmy, że posiadanie danego fontu na komputerze i jego poprawne wyświetlanie na naszym systemie, nie oznacza, że będzie się on poprawnie wyświetlać u wszystkich innych użytkowników. Cała magia tkwi w tym, by font został wyrenderowany, pomimo faktu, iż użytkownicy nie mają danego kroju pisma zainstalowanego na swoich komputerach. W tym celu najlepiej korzystać z [Google Fonts](https://www.google.com/fonts) lub fontów webowych, których pliki należy zaimportować do CSS-a. Tę drugą metodę poznamy nieco później.

Obecnie istnieje wiele portali, które darmowo udostępniają bardzo wiele różnych fontów. Jednym z najczęściej używanych jest [Google Fonts](https://www.google.com/fonts).

## Jak podłączyć font z Google Fonts?

Odwiedźmy stronę [Google Fonts](https://www.google.com/fonts) i wybierzmy font. W naszym layoucie [Planty](https://github.com/the-awwwesomes/tutorial-www-beginners/blob/master/pl/appendix/layouts/README.md) wykorzystane zostały trzy różne rodziny fontów: Playfair Display, Montserat oraz Muli. Znajdziemy je na [Google Fonts](https://www.google.com/fonts). Fonty te poza tym, że mogą zostać podpięte pod naszą stronę, mogą także zostać ściągnięte i zainstalowane na naszych komputerach.

Na stronie Google Fonts w oknie wyszukiwania, z prawej strony wpisujemy nazwę fontu.

![](/files/QV6U47MscycVkKBTjXIS)

Następnie będąc na stronie danego fontu, klikamy w „Select this font”.

![](/files/BJCnDcS0Rahfi6varf57)

Na samym dole klikamy w czarny panel „Family Selected”.

![](/files/MIneMLmn7zLCKa2wU3JU)

>

Powinien pokazać się pop-up, gdzie znajdziemy najważniejsze dla nas informację, które wykorzystamy do podpięcia wybranego fontu. Interesować nas będzie znacznik , który umieszczamy w sekcji oraz właściwość `font-family: "..."`, którą nadajemy danemu elementowi w pliku CSS. Dokładniejszy opis jak to zrobić znajdziecie poniżej.

W zakładce „Customize” wybierzmy interesujące nas style danego kroju. W projekcie Planty będziemy korzystać z „Normal 400” oraz „Normal 400 Italic”. W przypadkach, gdy współpracujemy z projektantami graficznymi zapytajmy o to, które style użyte są w projekcie.

![](/files/99rGlZ00wasSQwDs7dwh)

Jeśli tworzymy stronę w języku polskim, upewnijmy się czy font wyposażony jest w polskie znaki. Można to sprawdzić wpisując tekst w Google Fonts i obserwując jak te znaki są wyświetlane. Domyślnie font nie ma zaznaczonego checkboksa „Latin extended”, który zawiera m.in. polskie znaki.

Pamiętajmy, żeby zaznaczyć tę opcję, jeśli potrzebujemy polskich znaków. W przypadku Planty możemy zostawić opcję domyślną (teksty są w języku angielskim).

Poniższy znacznik należy umieścić w sekcji .

```
<link href='https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
```

Dzięki znacznikowi , podłączyliśmy do naszej strony font "Playfair Display", ale na samej stronie nic się nie zmieniło – ciągle wyświetlany jest domyślny font systemowy. Pozostało jeszcze podpięcie wybranego fonta do arkusza stylów. Dzieje się to dzięki właściwości `font-family`. W punkcie 4. na stronie Google Fonts znajdziemy nazwę fontu, którą trzeba zastosować.

```
ul li {
	font-family: 'Playfair Display', serif;
}
```

Zastanówmy się jeszcze, co oznacza wartość `'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.

```
ul li {
	font-family: 'Playfair Display', 'Georgia', serif;
}
```

Kod ten oznacza: "wyświetl font 'Playfair Display'; jeśli nie jest to możliwe, to wyświetl font 'Georgia'; jeśli 'Georgia' nie została znaleziona, to wyświetl dowolny font szeryfowy".

Teraz możemy sprawdzić czy nasza lista na stronie zmieniła font. W celu weryfikacji dla elementu listy odznaczmy właściwość `font-family` w narzędziach developerskich. Czy zaobserwowaliście zmianę fontu?

> ### Exercise::Ćwiczenie 9
>
> Pora 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.

Możecie dodawać dowolną liczbę niesystemowych fontów. Pamiętajcie jednak, że fonty ładowane są wraz z ładowaniem strony internetowej. Przy wolniejszym transferze internetowym zauważyć można doładowywanie fontów.