Czy wiesz co jest takim elementem, który zawsze jest obecny na każdej stronie?

Chodzi oczywiście o czcionki, typografię. Tekst stanowi większość powierzchni strony i czasami zajmuje nawet 95% całej jej powierzchni.

Google Fonts to powszechnie już znana usługa, która pozwala pobrać darmowe czcionki (w tym polskie fonty) na Twoją stronę lub bezpośrednio na komputer, oczywiście w celu urozmaicenia całego tekstu.

Już nie jeden grafik miał problemy ze stworzeniem dobrego projektu strony, szczególnie na początku kariery. Odpowiednio dobrana kolorystyka czy fonty mają priorytet przed innymi rzeczami i warto tutaj spędzić dłuższą chwilę.

Tak, jak pisałem wyżej, tekst zajmuje ogromną część każdej strony. Trzeba więc tak dobrać czcionkę, by zarówno dobrze wyglądała, ale też nie była kolejną odmianą Ariala, Times New Roman czy innych krojów, które każdy człowiek korzystający z komputera zna już na pamięć.

Na pomoc przychodzi nam Google Fonts, czyli darmowe czcionki, które w łatwy sposób można wstawić na swoją stronę. Nie dość, że ładują się z serwerów Google’a (redukując transfer na naszym serwerze), to jeszcze jest ich na tyle dużo, że cały czas jest z czego wybierać.

Google Fonts - darmowe czcionki (w tym polskie fonty) 1

​Chcesz ​nauczyć ​się ​czegoś ​nowego?​

​Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron i aplikacji ​- kursy dla początkujących i zaawansowanych

Jak zainstalować Google Fonts na Twojej stronie?

Wystarczy wejść na stronę Google Fonts i wybrać czcionki, które Cię interesują. Lista wszystkich czcionek wygląda następująco:

Wybór czcionki Google Fonts

Kiedy już jakieś Ci się spodobają, naciśnij „Add to Collection”. Z okienka, które pojawi się poniżej wybierz opcję „Use”, a następnie ustal jakie style czcionek są Ci potrzebne.

Pamiętaj, że gdy wybierzesz dużo stylów, takich jak bold (pogrubiony), italic (pochylony) i inne kombinacje, strona będzie ładować się dłużej. Po prostu więcej plików będzie musiało zostać wczytanych.

Zawsze będziesz mógł zobaczyć jak bardzo ładowanie fontów z Google Fonts wpłynie na prędkość ładowania Twojej strony. Pomaga w tym licznik w prawej górnej części strony.

Ostatni krok, to skopiowanie jednego z odnośników, który załaduje Google Fonts na Twojej stronie. Przykładowy link ładujący czcionkę Roboto:

Ustawianie czcionki z Google Fonts w stylach CSS

Gdy już wybierzesz sobie odpowiednią czcionkę Google Fonts, w łatwy sposób możesz ustawić taki krój dla dowolnego elementu w stylach CSS.

Pewnie znasz już ten kod:

Google Fonts - wstawianie czcionek na stronę

Właściwość font-family ustaw na odpowiednią wartość – zależnie od tego jaką czcionkę wybrałeś.

Wszystko jest już gotowe, właśnie zainstalowałeś nową czcionkę na swojej stronie. Pamiętaj, by wybrać tylko najpotrzebniejsze fonty, które nie wpłyną mocno na prędkość ładowania strony.

Warto też wspomnieć, że jeśli chcesz mieć widoczne polskie czcionki (z polskimi znakami), czasami w okienku wyboru na Google Fonts trzeba też zaznaczyć opcję „latin extended”, by załadować rozszerzony zestaw znaków.

Polecane darmowe czcionki z Google Fonts

Jeżeli nie wiesz jaką czcionkę wybrać, Google samo zasugeruje Ci wybór.

Najpopularniejsze czcionki znajdziesz na początku całej listy, czyli są to:

  • Open Sans
  • Roboto
  • Oswald
  • Lato
  • Open Sans Condensed
  • Source Sans Pro
  • PT Sans

Pamiętaj, by wybrać tylko te czcionki, które są Ci potrzebne, bo dzięki temu przyspieszysz czas ładowania swojej strony, a to jeden z czynników, który wpływa na jej pozycję w wyszukiwarkach.

Google Fonts - darmowe czcionki (w tym polskie fonty) 1

​Chcesz ​nauczyć ​się ​czegoś ​nowego?​

​Zapisz się na jeden z moich kursów wideo, gdzie nauczysz się wielu rzeczy związanych z tworzeniem stron i aplikacji ​- kursy dla początkujących i zaawansowanych

Jakub Jurkian

Pracuję jako Front End Developer w Londynie. Od ponad 11 lat jestem programistą-pasjonatem, a strony (i wszystko co z nimi związane) tworzę od 6 lat. Jestem też autorem kursów wideo - od 2013 roku prowadzę kanał na YouTube i tego bloga. Zaczynałem od pisania artykułów dla jednego z czołowych polskich portali IT - benchmark.pl. Prywatnie od 10 lat jestem związany z kulturą hip-hop (głównie taniec breakdance).

  • dodałbym jeszcze fonty jak ubuntu, asap, czy armata – bardzo fajne, no i musowo latin extended zaznaczona przy przeszukiwaniu bazy google fonts

  • >