HTML5 & CSS3

Własne kroje czcionki na stronie za pomocą @font-face i Font Squirrel

Jakiś czas temu napisałem artykuł „Google Fonts, czyli koniec standardowych krojów czcionek!„, gdzie w komentarzach pojawiła się wzmianka o ciekawej witrynie Font Squirrel. Jako, ze jest to właściwie temat na osobny wpis, poświęcę mu trochę czasu, przybliżając Wam niesamowite możliwości generatora fontów. Dzięki niemu możemy przystosować typografię do naszych potrzeb, umieszczając odpowiednio spreparowany zestaw fontów na serwerze. Rozwiązanie takie ma swoje plusy i minusy. Zapewne zwiększymy trochę znikanie transferu z naszego hostingu, jednak w większości przypadków uchronimy się od błędów w wyświetlaniu, polegając na witrynach innych niż nasza.

W niniejszym poradniku posłużyłem się fontem Britannic,
który możecie pobrać na stronie
www.myfonts.com/fonts/linotype/britannic-lt

Aby wykorzystać krój tej czcionki na naszej stronie internetowej do wyświetlania tekstów, musimy uprzednio skonwertować ją w odpowiedni sposób. Skorzystamy z generatora online, znajdującego się pod adresem www.fontsquirrel.com/fontface/generator.

Klikamy przycisk Add Fonts i szukamy naszej czcionki na dysku.

Rozpocznie się proces przesyłania. Oznaczamy dodatkowo kilka pól w formularzu.

Na koniec przyciskamy Download Your Kit. Proces przetwarzania jest w toku.

Kiedy się zakończy, musimy zapisać archiwum z plikiem na dysku komputera.

Instalacja nowego fontu na stronie

Rozpakowujemy pobrane przed chwilą archiwum. Znajduje się tam sporo plików. Nam jednak przyda się ich tylko kilka (o rozszerzeniach: eot, ttf, svg i woff).

Kopiujemy je do katalogu witryny.

Następnie w arkuszu CSS dodajemy kod, znajdujący się również w pobranej paczce, w pliku stylesheet.css.
W moim przypadku jego zawartość wygląda następująco:

@font-face {
    font-family: 'BritannicBoldRegular';
    src: url('britanic-webfont.eot');
    src: url('britanic-webfont.eot?#iefix') format('embedded-opentype'),
         url('britanic-webfont.woff') format('woff'),
         url('britanic-webfont.ttf') format('truetype'),
         url('britanic-webfont.svg#BritannicBoldRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Teraz odwoływać się możemy już do nowego kroju czcionki, w tym wypadku o nazwie BritannicBoldRegular, za pomocą CSS.
Dla przykładu, formatując tekst akapitu, nadamy mu poniższą własność:

p {font-family: BritannicBoldRegular, Tahoma, Arial;}

Warto podawać też po przecinkach alternatywne rodzaje fontów. Tak na wszelki wypadek.

Zobacz demo strony z użyciem @font-face i czcionki Britannic > DEMO

W razie pytań, problemów i wskazówek związanych z powyższym wpisem, proszę zostawiać wiadomości tylko i wyłącznie poniżej, w komentarzach.

komentarzy 14

  • Awatar
    Sebastian

    8 czerwca 2012 13:04

    Świetne. O @font-face dowiedziałem się stosunkowo niedawno. Genialne rozwiązanie.

    Odpowiedz
    • Awatar
      Michał Kortas

      8 czerwca 2012 14:00

      Tak, szczególnie teraz, kiedy jest wspierane przez nowsze wersje przeglądarek dużo lepiej niż jakiś czas temu.

      Odpowiedz
  • Awatar
    Łukasz Lubiński

    8 czerwca 2012 15:00

    Ostatnio jak używałem Kit Generatora to w Operze za nic nie chciała czcionka działać… Zostawiłem po prostu @font-face z czcionko .ttf – teraz działa w Operze 11.64. W takim układzie chyba  ttf wystarczy bez reszty plików, które generuje Kit Generator :)

    Odpowiedz
    • Awatar
      Mr.Mr

      9 czerwca 2012 12:01

       haha wiedziałem, że font squirrel chwyci ;) – genialna stronka

      co do generatora to on zapewnia najrozmaitsze formaty czcionek właśnie po to aby nie było problemów z różnymi przeglądarkami, plik z czcionką to w dużej mierze po prostu algorytm jest zapisania a przeglądarki lubią płatać z nimi figle. Generalnie każda przeglądarka „lubi” inne formaty czcionek.

      Nie wiem dlaczego u Ciebie akurat nie działało. Radzę sprawdzić czy nie było jakiś innych błędów.

      Odpowiedz
      • Awatar
        Łukasz Lubiński

        9 czerwca 2012 12:14

         Właśnie w tym sęk, że nie było. Pliki wygenerowane przez Kit i wrzucone na serwer, po czym wpisy w CSSie. Nie wiem czemu nie chodziło. Tak jak jednak wspomniałem – najnowsza Opera jak widzę obsługuje już @font-face (jak i IE i reszta).

        Odpowiedz
      • Awatar
        Mr.Mr

        9 czerwca 2012 12:21

        dziwne… to jest niestety magia przeglądarek ;)

        Odpowiedz
  • Awatar
    bartekmp

    8 czerwca 2012 22:07

    Do WordPressa niegdyś używałem Cufona, całkiem dobrze działało, choć w tamtych czasach konfiguracja była dość skomplikowana.

    Odpowiedz
  • Awatar
    pedson

    23 kwietnia 2013 17:00

    Witam. Wykonałem wszystko krok po kroku jednak nie mam pojęcia, gdzie umieścić frazę „p {font-family: BritannicBoldRegular, Tahoma, Arial;}”

    Będę wdzięczny za pomoc :)

    Odpowiedz
  • Awatar
    Karol

    21 maja 2013 10:35

    Dziękuję, działa jak należy

    Odpowiedz
  • Awatar
    Tom

    20 listopada 2013 13:53

    Super, działa, tylko mam jeden problem: nowy font na stronie nie działa z polskimi znakami (sam font takie posiada, tylko na stronie www w tekście nie są rozpoznawalne). Jak sobie z tym poradzić?

    Odpowiedz
    • Awatar
      Zares

      8 stycznia 2014 13:23

      Expert – Custom Subsetting… – Polish

      Odpowiedz
  • Awatar
    mario

    23 lipca 2015 10:03

    Zrobiłem wszystko w joomli tak jak w opisie….ale nie działa :/

    Odpowiedz
  • Awatar
    Michał

    6 kwietnia 2017 01:32

    Warto zaznaczyć że na tej stronie nie każda czcionka ma gotowego kita ze wszystkimi potrzebnymi pliakmi (np. TypeMyMusic) i nie ma svg. Najpierw trzeba kliknąć „Download TTF”, potem ten plik z czcionkami zaplądować i kliknąć przy okazji „EXPERT… You decide how best to optimize your fonts” i tam zaznaczyć w font formats brakujące pliki. W ogóle wydaje mi się że ta stronka służy do aplądowania własnych czcionek i potem są przerabiane tak że można wrzucić je na stronke ale tego jeszcze nie rozgryzłem. Pozdro

    Odpowiedz

Zostaw odpowiedź