10 świetnych czcionek, których nie znajdziesz w Google Fonts oraz ich instalacja na stronie

Całkiem możliwe, że znasz usługę Google’a, o dość intuicyjnej nazwie: „Google Fonts”. Można tam znaleźć przeróżne czcionki, które spełnią się świetnie, jako tekst na stronie internetowej.

Właśnie – tekst. Jedyny problem, jaki można zauważyć w tym serwisie, to to, że wszystkie fonty wyglądają bardzo podobnie. Nie znajdziemy tam ozdobnych czcionek, takich jak chociażby ta ze zdjęcia na początku.

Na szczęście w takiej sytuacji nigdy nie jesteśmy bez wyjścia. Z pomocą przychodzi nam mnóstwo fontów, znajdujących się w internecie oraz dedykowana właściwość CSS odpowiedzialna za ich dodawanie do witryny internetowej! Właśnie o tym pomówimy w tym artykule. 🙂

Jak instalować czcionki z pliku lub linku?

Cała operacja dzieje się w CSS. Pierwszym krokiem jest dodanie naszego fontu, za pomocą takiego przykładowego kodu:

@font-face {
    font-family: "Nowa czcionka";
    src: url(fonts/new.ttf) format('truetype');
}

W pierwszej lini nadajemy mu nazwę „Nowa czcionka”, po której będziemy go wywoływać, po czym ustawiamy jego ścieżkę i typ pliku. Url tej konkretnej czcionki to „fonts/new.ttf” (oczywiście w tym miejscu może znaleźć się link).

Jeszcze będąc w temacie formatu plików, to niestety istnieją przeglądarki które nie obsługują typu „truetype” i jeśli chcemy, aby nasza czcionka działała idealnie, to możemy całość zaimportować wg. kodu np. z tej strony (tutaj z kolei można znaleźć świetne narzędzie, które pozwala na zmianę typu czcionki).

Z kolei już samo użycie prezentuje się w ten oto sposób:

p {
    font-family: 'Nowa czcionka';
}

Wykorzystujemy tu zwykłą właściwość CSSa odpowiedzialną za ustawienie konkretnej czcionki (w tym przypadku jej nazwa to „Nowa czcionka”) dla naszego elementu.

I to wszystko! Przejdę może już do drugiej części artykułu, w której pokażę Ci trochę świetnych czcionek!

10 ciekawych fontów.

Oto lista 10 darmowych czcionek, które, mam nadzieję okażą się przydatne dla Ciebie przy okazji tworzenia stron internetowych oraz grafik. 🙂

Podzieliłem je na dwie kategorie. Pierwsze 5 z nich zawiera polskie ogonki, w przeciwieństwie do kolejnych. Jest to spowodowane tym, że niestety mało tego typu czcionek w ogóle je posiada, a nie zawsze piszemy tekst który zawiera polskie znaki. 🙂

Czcionki z polskimi ogonkami:

Numer 1: Peace Sans.

Numer 2: Moderne Sans.

Numer 3: Sophia.

Numer 4: Tipper.

Numer 5: Nickainley.

Czcionki bez polskich ogonków:

Numer 1: Blow Brush.

Numer 2: Diotima.

Numer 3: Moon.

Numer 4: Cornerstone.

Numer 5: Dekar.

Podsumowanie.

Jak widać, tworząc strony internetowe nie musimy się ograniczać do impotowania przeznaczonych do tego czcionek z Google Fonts. W bardzo prosty sposób możemy dodać je samodzielnie. 🙂

Jeśli znasz jakieś fonty, które Twoim zdaniem są warte uwagi lub masz pytania, to zapraszam do komentowania wpisu. Z kolei jeśli ten artykuł okazał się dla Ciebie wartościowy, to będzie mi niezmiernie miło jeśli udostępnisz go swoim znajomym lub czytelnikom. 🙂

10 świetnych czcionek, których nie znajdziesz w Google Fonts oraz ich instalacja na stronie

Jak instalować czcionki z pliku lub linku?