Dlaczego Google Fonts i jak je stosować
Poruszmy po krótce temat niestandardowych fontów na stronie. Coraz mniej jest osób godzących się na kilka wbudownych w każdy system (Arial, Verdana Times New Roman…). Dzięki dobrodziejstu @font-face możemy dołaczyć do strony każdy font i tak jest już od dłuższego czasu. Obecnie większym pytaniem może być „skąd te fonty legalnie pobierać?”
Jeżeli jesteś zainteresowany teorią rozwoju czczionek zapaszam do wpisu „Trochę o typografii na stronach wwww”
Google Fonts
Google Fonts jest naprawdę świetnym narzędziem z kilku powodów. Obecnie do dyspozycji mamy 810 rodzin, czyli takich paczek.
Standardowe serwisy mają segregację ze względu na rodzaj czyli, np. stylizowane na ręczne, szeryfowe, bezszeryfowe itd.. Tutaj ich wyszukiwanie możemy filtrować ze względu na:
- grubość
- stopień pochylenia
- szerokość znaków
- liczbę styli (thin, light, regular, bold, italic etc.)
Oprócz dosyć niestandardowego filtrowania mamy również do dyspozycji wybór bardziej tradycyjny:
- szeryfowe
- bezszeryfowe
- stylizowane na ręczne
- monospace (jednakowa szerokość wszystkich znaków)
- display (dekoracyjne)
Do tego dochodzi segregowanie wg popularności, daty dodania, alfabetycznie – standard. Możemy również sprawdzić jak teksty będą prezentowały się na innych kolorach tła (do wyboru niebieski, czarny, biały, zółty).
Jak znaleźć polskie fonty?
To jest coś co również odróżnia Google Fonts od innych większych „bibliotek”. Google daje nam możliwość filtrowania ze względu na JĘZYK. Nie mam na myśli, że wyszuka nam „język polski” ale to nic, ponieważ to i tak oznacza koniec wpisywania w wyszukiwarkę „polskie darmowe fonty” oraz przeglądania dafont.com czy wybrany font ma nasze znaki diakrytyczne.
Wystarczy zaznaczyć język „Latin Extended„. Dzięki temu Google odrzuca zestawy nieprzystosowane do języka łacińskiego rozszerzonego. Nie daje nam to 100% pewności na polskie znaki, jednak dzięki podglądowi live, możemy wpisać śźćśłó i na bierząco sprawdzać czy dany font na pewno obsługuje nasze znaki.
Wszystkie fonty są darmowe
Wszystkie fonty Google Fonts posiadają licencję open source, więc bez strachu możemy ich używać zarówno na stronach internetowch oraz na jakichkolwiek projektach graficznych.
Oszczędność
Przy wyborze fontów możemy zaznaczyć, których stylów potrzebujemy. W ten sposób załączyamy tylko to co faktycznie chcemy.
Oszczędzamy czas. Aby zaimplementować wybrany font potrzebujemy dosłownie chwili. Wystarczy dodać jedną linijkę w sekcji <head> lub do pliku CSS (jest to jednocześnie bardzo wygodne).
Na upartego możemy powiedzieć, że oszczędzamy miejsce i transfer, ponieważ fonty są zaciągane z serwerów Googla
Jak użyć Google Fonts krok po kroku
Obsługa jest banalnie prosta.
- Wchodzimy na stronę https://fonts.google.com/ i szukamy naszego fontu. Po prawej stronie jest sekcja filtrowania. Na górze możemy zmienić kolor tła. Natomiat klikająć na tekst – możemy od razu zmieniać jego treść i sprawdzić czy obsługuje polskie znaki.
- Masz? Teraz wystarczy kliknąć ikonę „+” przy nazwie. Na dole ekranu pojawi się panel z informacją.
- Po kliknięciu w ten panel rozwiną nam się wszystkie ustawienia i informacje. Przechodząć do zakładki „CUSTOMIZE” możemy zaznaczyć style (czy chcemy grubsze, pochylone, zwężone itd.) oraz co ważne język „Latin Extended„, o którym wspomniałem w poprzednim punkcie.
- Wracamy do zakładki „EMBED„, tam jest linijka, którą musimy załączyć w sekcji <head> lub, coś co ja zawsze wybieram: w zakładce „@IMPORT” dodajemy linijkę, którą należy załączyć na naszego pliku CSS. Poniżej mamy przykład zastosowania fontu.
- Gotowe! Możemy jeszcze pobrać fonty na komputer lub podejrzeć wszystkie opcje:
