Google fonts – fonty na twoją stronę internetową

Czas czytania: 3 minut

Jak pisałam we wcześniejszym artykule nie można umieszczać dowolnego fontu na stronie internetowej nie ryzykując, tego że u kogoś się źle wyświetli lub zostanie zastąpiona przez inny font.

W wcześniejszym wpisie wspomniałam o jednej z metod radzenia sobie z tym problemem czyli o plikach Cufon.

Dodawanie fonta (tzw. czcionki) w ten sposób nie jest specjalnie trudne ile czasochłonne i niekiedy problematyczne (trzeba posiadać konkretny font w formie plikowej). Pomijając samą implementacje nie możność zaznaczenie tekstu po problemy z prawami autorskimi do fontów (czcionek elektronicznych).

Dlaczego Google Fonts!

Chcę więc zaproponować alternatywne rozwiązanie dużo prostsze i przyjemniejsze w użytkowaniu. Chodzi o Google Fonts czyli Fonty (czcionki) od Google. Inną wartą wspomnienia zaletą tej metody jest to, że jest darmowa. Nie musimy by z niej skorzystać kupować niczego kupować.

logo google

Jak umieścić font na stronie

Na początek wchodzimy na stronę internetową https://fonts.google.com/

Następnie szukamy na niej interesującego nas kroju fonta. Możemy wybrać kilka rodzajów, ale bez przesady maksymalnie 3 większa ilość może odstraszać docelowego odbiorcę.

Strona Google Fonts
Strona Google Fonts
Ustawianie Polskich znaków

Po wejściu na stronę koniecznie wejdź w opcję „Languages” w celu wybrania typu czcionki – podstawowa wersja to Latin (łacińska). Nie występują w niej znaki diakrytyczne typowe dla języka polskiego czyli np. ą, ę, ć. Dlatego wyszukujemy opcji Latin Extended.

Wybór języka fontu
Wybór języka fontu

Po przefiltrowaniu czcionek otrzymamy listę z fontami obsługującymi język Polski. Teraz możemy dokonać wyboru przez przycisk czerwony krzyżyk umieszczony po prawej względem nazwy kroju.

Po dodaniu fonta pojawi się u dołu ciemny pasek z informacją o ilości dodanych fontów. Po kliknięciu w niego otworzy się okno:

Opcje przykładowego fonta Google
Opcje przykładowego fonta Google

W przykładzie dodałam tylko jeden font. Jeśli w tej chwili zmieniłeś zdanie możesz odjąć font klikając „minus” obok nazwy typu fonta.

W otwartej zakładce posiadamy podstawowe informacje o foncie jednak są one nie wystarczające dla prawidłowego działania strony. Musimy ją jeszcze skonfigurować w zakładce „CUSTOMIZE”.

konfiguracja fonta
konfiguracja fonta

Mamy tutaj dostępne grubości fonta. Wybieramy je w zależności od potrzeb.

konfiguracja fonta
Opcje przykładowego fonta Google

Wybieramy również typ czcionki „Languages” ponownie wybieramy „Latin Extended”. Zostawiając opcje „Latin”.

Użycie na Google fonts na stronie

W celu umieszczenia fontu na stronie internetowej wracamy do zakładki „EMBED”. Teraz mamy tu dwie opcje „STANDARD” i „@IMPORT”.

"Dodawanie

W zależności od potrzeb dodajemy font albo w head strony lub w stylach CSS naszej witryny. Kod z pola „STANDARD” umieszczamy w <head>, „@IMPORT” w stylach CSS strony.

Dodawanie fonta do strony w stylach CSS
Dodawanie fonta do strony w stylach CSS

Przy dodawaniu fonta w stylach CSS najlepiej umieścić go jak najwyżej w kodzie, tak by pojawił się przed pierwszym wywołaniem czcionki / fontu.

Teraz możemy dodać font do dowolnego elementu na stronie np:

h1 {
   font-family: 'Open Sans', sans-serif;
}

Jak widać korzystanie z Google Fonts jest bardzo prost.

[edytowane 04.10.2017]

dodatkowe tagi:
darmowe czcionki od google
instalacja fontu w witrynie internetowej
brak polskich znaków
własny font na blogu
dobieranie czcionek do strony