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.

Czcionka Peace Sans

Numer 2: Moderne Sans.

Font Moderne Sans

Numer 3: Sophia.

Czcionka Sophia na białym tle

Numer 4: Tipper.

Czcionka Tipper na zielonym tle

Numer 5: Nickainley.

Font Nickainley


Czcionki bez polskich ogonków:

Numer 1: Blow Brush.

Czcionka Blowbrush

Numer 2: Diotima.

Font Diotima

Numer 3: Moon.

Czcionka Moon

Numer 4: Cornerstone.

Czcionka cornerstone

Numer 5: Dekar.

Czcionka 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. 🙂

Programista zakochany w JavaScript’cie, twórca stron internetowych i jak widać od niedawna bloger 🙂
8 comments Add yours
  1. Fajny wpis i ciekawe czcionki. Mam tylko 2 pytanka:
    1) Dlaczego nie wgrasz komentarzy Disquss 🙂
    2) teraz na poważnie – jak jest obecnie z fontface, nadal zaleca się podgrywać różne formaty, woff, eot, ttf, bo u siebie w przykładzie robisz tylko ttf?
    Pozdrawiam,
    Tomek

    1. Dziękuję bardzo! 🙂

      Odpowiadając na Twoje pytania:
      1) Próbowałem to robić, ale na każdym etapie, który powinien przejść bez komplikacji, miałem jakieś problemy. Podczas konfiguracji, importu komentarzy z WordPressa i nie tylko. Koniec końców całość nie działała w pełni dobrze. Z tego powodu odpuściłem, ale na pewno wrócę do tego w najbliższym czasie.
      2) Z tego co mi wiadomo, to wgrywanie wszystkich potrzebnych formatów, takich jak ttf, svg, woff, woff2 oraz eot jest uzasadnione, ale w praktyce truetype wystarczy do poprawnego działania konkretnej czcionki na wszystkich przeglądarkach poza starszymi IE. Swoją drogą dziękuję Ci za to pytanie, dzięki niemu dodałem odpowiednią informację w artykule. 🙂

      Również Cię pozdrawiam!
      Robert.

      1. O starych IE to nie mówimy… no chyba, że mamy takiego genialnego klienta, którego nie stać na nowego kompa za 2000zł 😀
        Dzięki za odpowiedź, do tej pory z przyzwyczajenia często ładowałem komplet pików w zależności od potrzeby i w sumie nie zastanawiałem się nigdy głębiej nad tym tematem 🙂

        1. Dobrze, że pomimo tego, że IE cały czas posiada dość znaczący udział w rynku, to regularnie traci użytkowników. 🙂

          Cieszę się, że mogłem pomóc! 😀

  2. Wg mnie powinno używać się terminu: ‘font’ a nie ‘czcionka’. Bo (o ile dobrze pamiętam) ‘czcionka’ to ołowiany blok z glifem… a font to cyfrowa postać czcionki.
    Ciekawe też czy do instalacji czcionki używa się kaszty?

    1. To co napisałeś Staszku rzeczywiście jest w pełni prawdziwe, ale z tego co wiem, to te terminy można używać zamiennie (określenie “czcionka” w sensie cyfrowej jest bardziej potoczne). Dlatego wolałem wprowadzić do artykułu trochę mowy nieformalnej na rzecz wyeliminowania powtórzeń. 🙂

Dodaj komentarz

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