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:
1 2 3 4 5 6 7 8 9 10 11 | @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ść:
1 | 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.
Świetne. O @font-face dowiedziałem się stosunkowo niedawno. Genialne rozwiązanie.
Tak, szczególnie teraz, kiedy jest wspierane przez nowsze wersje przeglądarek dużo lepiej niż jakiś czas temu.
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 :)
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).
dziwne… to jest niestety magia przeglądarek ;)
Do WordPressa niegdyś używałem Cufona, całkiem dobrze działało, choć w tamtych czasach konfiguracja była dość skomplikowana.
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 :)
Dziękuję, działa jak należy
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ć?
Expert – Custom Subsetting… – Polish
Zrobiłem wszystko w joomli tak jak w opisie….ale nie działa :/
Co dokładnie nie działa? W ogóle nie ładuje się font?
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