Google Fonts – co to jest i jak pobrać?

 

Google Fonts

Gdy słyszymy słowo ‘czcionka’, na myśl przychodzą nam takie nazwy jak Arial czy Verdana. Są to podstawowe czcionki używane najczęściej w dokumentach i różnorakich plikach tekstowych. W aplikacjach i witrynach internetowych (na szczęście) powoli przechodzą do lamusa. Powinniśmy się z tego cieszyć, ponieważ trudno wyobrazić sobie, by każda strona internetowa miała jednakową czcionkę. Internet byłby wtedy po prostu… monotonny. Podobnie myśli gigant z Mountain View, który stworzył narzędzie Google Fonts.

google fonts

 

Czcionki Google są swego rodzaju ewenementem. Jest ich prawie 900, są w pełni darmowe, a w momencie pisania tego posta, zostały wyświetlone już prawie 28.420.000.000.000 razy (słownie: 28 bilionów 420 miliardów).

W dzisiejszym artykule oprócz kilku ciekawostek i opisu, czym są Google Fonts, pokażemy też krok po kroku, jak pobrać i zainstalować je na swojej stronie. Zajmie to nam nie więcej niż 10 minut.

 

 

Co to Google Fonts?

Google Fonts jest największym, darmowym zbiorem czcionek w Internecie. Wszystkie czcionki są udostępnione w wersji open-source – mogą być używane bezpłatnie, zarówno w celach komercyjnych, jak i osobistych.

Witryna Google Fonts pozwala na wyszukiwanie i dostosowywanie, a następnie w miarę proste dodanie czcionek do własnej witryny internetowej.

co to jest google fonts

 

Warto też dodać, że wybór ułatwia możliwość przetestowania wyglądu fontów poprzez dodanie własnego tekstu. To naprawdę ważna funkcjonalność, dzięki której możemy oszczędzić sobie sporo czasu – dodajemy swój przykładowy tekst i widzimy, jak będzie wyglądał w praktyce dla każdej z czcionek.

 

Kto tworzy czcionki Google?

Google Fonts są tworzone przez autorów z całego świata. Niezależni projektanci, webdesignerzy i różne fundacje tworzą społeczność odpowiedzialną za czcionki, które codziennie widzimy na swoich ekranach.

Warto wiedzieć: Trzecia najpopularniejsza czcionka Google została stworzona przez Polaka. Łukasz Dziedzic jest autorem czcionki Lato, która została wyświetlona przeszło 1,5 biliona razy!

 

Kto korzysta z czcionek Google?

Można by powiedzieć, że wszyscy – ale to raczej pojęcie względne. Niektóre osoby, które używają Google Fonts na swojej stronie, nawet o tym nie wiedzą. Przykładem mogą być tutaj gotowe motywy WordPress, gdzie czcionki Google są z góry zainstalowane.

Warto wiedzieć: Dzięki temu, że Google Fonts jest otwartym źródłem, czcionki nie są używane jedynie w Internecie – można je spotkać również w reklamach, na billboardach i książkach.

 

 

Jak pobrać i dodać Google Fonts na stronie

Chociaż instalacja Google Fonts na początku może wydawać się nieco skomplikowana, wcale taka nie jest. Oto 7 kroków, jak dodać czcionkę Google we własnej witrynie:

 

1. Otwórz witrynę Google Fonts

Rozpocznij od odwiedzenia strony fonts.google.com. Znajdziesz na niej wszystko, o czym pisaliśmy wyżej.

pobieranie google fonts - krok 1

 

2. Wybierz lub wyszukaj czcionkę

Jeśli wcześniej znalazłeś wymarzoną czcionkę i znasz jej nazwę, skorzystaj z wyszukiwarki. Możesz też przejrzeć całą listę fontów klikając „Directory”, lub zobaczyć najnowsze wybierając „Featured”.

pobieranie google fonts - krok 2

 

3. Kliknij przycisk „+” obok wybranej czcionki

Każda z czcionek na liście ma swój własny przycisk dodawania. Kliknij na „+” w prawym górnym rogu, aby wybrać jedną z nich (jeśli chcesz, możesz dodać i zainstalować kilka czcionek naraz).

pobieranie google fonts - krok 3

 

4. Kliknij na czarny pasek u dołu ekranu

Brawo, wybrałeś już swoje nowe czcionki! Teraz otwórz zakładkę ustawień klikając czarny pasek u dołu ekranu.

pobieranie google fonts - krok 4

 

5. Przejdź do zakładki „Customize”

Standardowo Google pobierze podstawową wersję czcionki (regular 400). Możesz jednak wybrać inne wersje otwierając zakładkę „Customize”.

pobieranie google fonts - krok 5

 

6. Zaimportuj czcionkę na swoją stronę

Teraz wróć do pierwszej zakładki „Embed” i skopiuj kod, by zaimportować czcionkę do swojej witryny. Istnieją dwie opcje, by to zrobić:

6.1. Import kodu HTML do części

Skopiuj standardowy kod HTML i wklej go pomiędzy znacznikami .

pobieranie google fonts - krok 6.1

 

6.2. Import za pomocą funkcji @import do pliku style.css

Skopiuj kod @import i wklej go do pliku style.css lub innego arkuszu styli.

pobieranie google fonts - krok 6.2

 

7. Skopiuj kod CSS i wklej go do pliku style.css

Teraz skopiuj kod CSS (również do pliku style.css) i wybierz, gdzie nowa czcionka ma się wyświetlać. Poniżej przedstawiamy wyświetlanie czcionki Lato w tekście (p) oraz czcionki Open Sans w nagłówkach (H1, H2, H3, …).

pobieranie google fonts - krok 7

 

 

Sprawdź najszybszy na rynku hosting WordPress oraz hosting Ecommerce.

 

Podsumowanie

Udało się! Właśnie dowiedziałeś się, jak zainstalować czcionki od Google na własnej stronie. Wiesz już też, czym są i jak z nich korzystać w praktyce. Ta wiedza na pewno ułatwi Ci dopasowywanie wyglądu fontów w swoim internetowym dorobku.

 

 

 

Odbieramy telefony, odpisujemy na maile, nie ukrywamy kosztów, a dodatkowo oferujemy najszybsze pakiety hostingowe na rynku. Uważasz, że to zwroty marketingowe? Sprawdź sam/a!

Jeśli nie będziesz zadowolony/a, zwrócimy Ci pieniądze.
Twoje strony i sklepy przeniesiemy za darmo!

Hosting WordPressHosting Magento

Jeżeli masz jakiekolwiek pytania, skontaktuj się z nami! Kliknij tutaj.

Chcesz dowiedzieć się o nas trochę więcej? Przejdź na stronę JCHost.pl.

Daj znać znajomym!