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).
Co znajdziesz w tym wpisie
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ć.
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ę.
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.
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”.
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”.
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
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.