# 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.
Następnie będąc na stronie danego fontu, klikamy w „Select this font”.
Na samym dole klikamy w czarny panel „Family Selected”.
>
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.
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 .
```
```
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.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://the-awwwesomes-2.gitbook.io/tutorial-the-awwwesomes-html-and-css/the-awwwesomes-tutorial-www-beginners-5.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.