Porady komputerowe: Jak dodać własne czcionki na stronie tak, by nikt nie miał problemów z ich wyświetleniem

Też coś mam nadzieje że wam się przyda.
Szczególności kierowane jest do osób mających własne strony lub blogi.

Aby poradzić sobie z tym zagadnieniem, musimy tak skonfigurować czcionki na stronie, aby u każdego wyświetlały się prawidłowo. Aby to zrobić wykorzystamy skrypt JS o nazwie Cufon.

Cufon jest rozwiązaniem coraz częściej spotykanym ze względu na to, że w przeciwieństwie do sIFR’a nie musimy korzystać z FLASH’a, tylko z elementu <canvas> stosowanym w HTML5. Takie rozwiązanie działa szybciej i jest wygodniejsze we wdrażaniu.

Instalujemy Cufon:

Aby skonfigurować Cufon na własnej stronie najpierw musimy pobrać plik cufon-yui.js z tej strony: cufon.shoqolate.com

Następnie na tej samej stronie korzystamy z formularza, aby wgrać naszą czcionkę z dysku. Jeżeli potrzebujemy polskich znaków to w sekcji “include the following glyphs (if available)” zaznaczamy Basic Latin, Latin-1 Supplement, Latin-Extended-A, Latin-Extended-B, akceptujemy regulamin („Eula” i „Terms”) i klikamy „Let’s do this!”.

Teraz automatycznie zostanie dla nas wygenerowany plik o nazwienazwa_czcionki_400.font.js.

Mamy już wszystko, więc czas umieścić skrypty na naszej stronie czy szablonie. Wgrywamy te pliki na nasz serwer i między tagami <head> i </head> wklejamy ten kod (pamiętajmy o zmianie nazwy pliku z czcionką na własną nazwę):

<script src=”cufon-yui.js” type=”text/javascript”></script>

<script src=”nazwa_czcionki_400.font.js” type=”text/javascript”></script>

Teraz wystarczy tylko zdefiniować, które elementy będą wymieniane na naszą czcionkę. Wymieniamy je w „headzie” strony w następujący sposób:

<script type=”text/javascript”>

Cufon.replace(‘h2′);
</script>

Korzystanie z kilku czcionek:

Mamy również zastosowania różnych czcionek do różnych elementów. Aby to zrobić należy wygenerować plik .js dla każdej naszej czcionki i dodać je w headzie metodą opisaną wyżej. Następnie dodajemy np. taki kod:

<script type=”text/javascript”>
Cufon.replace(‘h2′, { fontFamily: ‘nazwa_czcinki_1′ });
Cufon.replace(‘.dowolna_klasa’, { fontFamily: ‘nazwa_czcionki_2′ });
</script>

Mam nadzieję, że ten opis pomógł Ci w konfiguracji Cufon. Jeżeli masz jakieś problemy albo po prostu chcesz się przywitać to napisz poniżej komentarz.