Problem z niestandardowym fontem na stronie polega na tym, że choć ładnie wygląda, to może go zabraknąć na komputerze odbiorcy. Można oczywiście ustawić we właściwości <font> jakieś zastępstwa, ale zawsze istnieje takie ryzyko, że po pierwsze strona bez podstawowego fonta się rozjedzie, po drugie – i to już na pewno – z innym fontem po prostu nie będzie tak fajnie.

Jak działa Cufon?

Na Cufon trafiłem przypadkiem, przeglądając kod źródłowy prewki jednej z templatek na www.templatemonster.com (powiało ąę). To rozwiązanie oparte na JavaScript na licencji MIT, także spokojnie można z niego korzystać również na stronach komercyjnych.

Zacznijmy od początku. Aby zacząć korzystać z Cufon należy podpiąć ten oto skrypt pod stronę, na której Cufon będzie używany. Naturalnie możemy go sobie zapisać do pliku i zmienić nazwę.

Następnie musimy użyć dostępnego na stronie generatora. Przede wszystkim określamy fonta, jakiego chcemy użyć. Ja postanowiłem użyć Antykwy Toruńskiej, bo po pierwsze – jest na licencji GNU, po drugie – nie mam jej zainstalowanej. Generator pozwala na załączenie plików z czterema odmianami fonta – Regular (zwykła – wymagana), Bold (pogrubiona – opcjonalnie), Italic (pochylona – opcjonalnie), Bold Italic (pogrubiona, pochylona – opcjonalnie).

W dalszej części należy odhaczyć, że licencja czcionki, której zamierzamy używać, zezwala na jej tzw. osadzanie (embedding). Niestety, z tego co udało mi się ustalić wynika, że jednak spora część licencji albo nie zezwala albo w ogóle nie porusza kwestii osadzania. Jeśli chodzi o rodzaje licencji dotyczące osadzania, które możecie napotkać, to możemy wyróżnić cztery:

  • Restricted (osadzanie niedozwolone)
  • Print&Preview (osadzanie dozwolone tylko w dokumentach przeznaczonych wyłącznie do odczytu, jak np. PDF)
  • Editable (osadzanie dozwolone w dokumentach edytowalnych)
  • Installable (osadzanie i instalowanie dozwolone)

Trochę więcej informacji możecie znaleźć pod tym adresem (english reuired), miedzy innymi informację o tym, że ponoć (ponoć!) licencje czcionek Adobe zezwalają na osadzanie. Okazuje się, że nie wszystkie – więcej informacji dodałem na samym dole wpisu.

Kiedy już wybraliśmy czcionkę i wiemy, że spokojnie możemy ją osadzić na stronie www, możemy wybrać zestaw znaków, który chcemy zastąpić. Domyślnie ustawiony jest zestaw Basic Latin. Możemy go zmienić, a powinniśmy uzupełnić o polskie znaki (ąćęłńóśżźĄĆĘŁŃÓŚŻŹ). UWAGA! Polskie znaki zadziałają tylko wówczas, kiedy są uwzględnione w czcionce.

Na koniec akceptujemy warunki licencyjne (no chyba, że ktoś ma ochotę w między czasie pobawić się pozostałymi ustawieniami, ale nie jet to konieczne) i generujemy plik o nazwie NazwaTwojegoFonta.font.js. Ten plik zapisujemy na dysku, możemy też zmienić jego nazwę, a następnie podpinamy pod stronę. Generalnie sekcja <head> powinna wyglądać w ten sposób:

<script type="text/javascript" src="cufon.js"></script>
<script type="text/javascript" src="antykwa.js"></script>

Pozostało już tylko aktywować skrypt na nagłówkach:

<script type="text/javascript">
	Cufon.replace('h1');
</script>

Edit:

Postanowiłem sprawdzić, czy faktycznie wszystkie fonty Adobe można wykorzystać korzystając z Cufon. Okazuje się, że nie wszystkie, ale faktycznie – większość. Licencje niektórych fontów nie zezwalają na to. W tym miejscu znajduje się alfabetyczna lista fontów Adobe z licencją Editable Embedding oraz licencją Preview & Print. Tutaj natomiast możecie sobie przeczytać warunki obu licencji.

Moim zdaniem fontów na obu tych licencjach możemy używać z Cufon’em, co cieszy mnie szczególnie, ponieważ uwielbiam Miniona i Myriada. :) Próbowałem uzyskać potwierdzenie na czacie Adobe, ale niestety mam dziwne wrażenie, że Deepak V, kimkolwiek jest, nie miał pojęcia o co chodzi.

Podobne wpisy: