Google fonts – fonty na twoją stronę internetową

Google fonts - fonty na twoją stronę internetową

Kategoria wpisu Rozwiązania Tagi: , , on przez .


1 Gwizdka2 Gwizdki3 Gwizdki4 Gwizdki5 Gwizdki (Brak ocen)
Loading...

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 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).

Chcę więc zaproponować alternatywne rozwiązanie dużo prostsze i przyjemniejsze w użytkowaniu. Chodzi o Google Fonts czyli Fonty (czcionki) od Google.

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

 

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 otrzymujemy 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”.

W celu umieszczenia fontu wracamy do zakładki „STANDARD.

Dodawanie fonta do strony w <head> strony

Dodawanie fonta do strony w <head> strony

W zależności od potrzeb dodajemy font albo w head strony lub w stylach CSS naszej witryny.

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 użyciem.

 

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

 

[edytowane 04.10.2017]

dodatkowe tagi:
Jak korzystać z Google fonts
darmowe czcionki od google
instalacja fontu w witrynie internetowej
polskie, polsko języczne fonty
brak polskich znaków
własny font na blogu
dobieranie czcionek do strony
fonty na twoją stronę internetową

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *