jestem online, kobieta w sieci
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).
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ć.
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ę.
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.
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:
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”.
Mamy tutaj dostępne grubości fonta. Wybieramy je w zależności od potrzeb.
Wybieramy również typ czcionki „Languages” ponownie wybieramy „Latin Extended”. Zostawiając opcje „Latin”.
W celu umieszczenia fontu na stronie internetowej wracamy do zakładki „EMBED”. Teraz mamy tu dwie opcje „STANDARD” i „@IMPORT”.
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.
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
Jak w przypadku wielu różnych tematów tak i w przypadku marki osobistej pojawiło się przez…
Choć zabrzmi to może nieco dziwnie to wprowadzenie AI (sztucznej inteligencji) do naszego życia było…
Widmo Brockenu to dość rzadko spotykane zjawisko optyczne, najczęściej widywane w wysokich partiach gór. Można…
Zacznę może od tego, że relikwia, relikwii nie równa. Wiem jeśli nie ma się pojęcia…
Logo stanowi jeden z ważniejszych elementów tożsamości wizualnej praktycznie każdej firmy, marki czy projektu. Logo…
Budując własną markę osobistą lub chcąc ją zbudować trzeba liczyć się z wieloma wyzwaniami. Jednym…