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


8 czerwca 2012 / Michał Kortas


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:

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ść:

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.



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

  1. Sebastian pisze:

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

  2. 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 :)

    • Mr.Mr pisze:

       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.

      •  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).

      • Mr.Mr pisze:

        dziwne… to jest niestety magia przeglądarek ;)

  3. bartekmp pisze:

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

  4. pedson pisze:

    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 :)

  5. Karol pisze:

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

  6. Tom pisze:

    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ć?

  7. mario pisze:

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

  8. Michał pisze:

    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

Skomentuj Karol Anuluj pisanie odpowiedzi

Twój adres e-mail nie zostanie opublikowany.