6 sposobów na dodanie własnej czcionki do strony internetowej

Problem z umieszczeniem własnej czcionki na stronie internetowej istniał od zawsze. Najpewniejszą metodą było wygenerowanie tekstu w programie graficznym, a następnie wstawienie go jako obrazka. Gorsza sprawa, kiedy generowany tekst jest dynamiczny. Na szczęście istnieje coraz więcej mechanizmów, które pozwalają na podmianę tekstu na stronie zgodnie z wyznaczoną czcionką - czy to przy użyciu Flash'a, PHP z biblioteką GD, czy mechanizmów grafiki wektorowej (SVG, VML, canvas).

Przykład z polskimi czcionkami

Google Font API - zażółć gęślą jaźń

Tym razem chciałem przeglądnąć 6 różnych metod generowania - możemy je podzielić na dwie grupy:

• API udostępniające czcionki ze swoich serwerów
  
  • Google Font API
  • Typekit
• Biblioteki, które pozwalają osadzać własne czcionki
  
  • Cufón
  • Typeface.js
  • FLiR
  • SiFR

API udostępniające czcionki - czyli kawałek kodu JS (podanego przez udostępniającego API) a u nas tylko krótki wpis w CSS, którą czcionkę używamy.

Google Font API

Google przedstawił podczas konferencji Google I/O 2010 nowe API, które pozwala osadzać nam czcionki na własnych stronach. Z testów wynika, że Google Font API radzi sobie nawet z IE6! Jedynym minusem jest mały wybór czcionek, aczkowiek już część z nich posiada polskie znaki - czekamy na dalszy rozwój. Proste wstawianie czcionki - @font-face w stylach.

Zalety:

• darmowe
• łatwa instalacja
• polskie litery
• działa pod każdą nowoczesną przeglądarką i nie tylko (IE6)

Wady:

• mało czcionek

Typekit

Jeden z pierwszych serwisów umożliwiających osadzanie czcionek na swojej stronie - osadzamy podobnie jak w przypadku Google - używając @font-face. Inna sprawa, że panowie z Typekita pomagali Google w budowie ich usługi. Serwis w założeniu ma udostępniać czcionki za pewną opłatą - dzięki temu zyskujemy dużo większy wybór niż w przypadku Google. Ale polskich znaków w czcionkach brak - testowałem kilkadziesiąt i nie było :(

Zalety:

• łatwa instalacja
• działa pod przeglądarkami i IE6
• duży wybór czcionek

Wady:

• czcionkom brakuje polskich znaków
• płatne

Biblioteki umożliwiające generowanie własnych tekstów z podanych czcionek - biblioteki JS, PHP i Flash.

Cufón

Jedna z najczęściej przeze mnie stosowanych bibliotek - głównie ze względu na super generator czcionki i bardzo dobrą jakość. Do instalacji potrzebny jest plik cufon.js, plik czcionki i uruchomienie poprzez wykonanie metody Cufon.replace. Działa pod wieloma przeglądarkami - obsługuje hover'y (zmianę stylu po najechaniu - przydatne przy linkach)

Zalety:

• bardzo dobry i rozbudowany generator plików
• obsługa hover'a
• łatwa instalacja

Wady:

• problemy z zaznaczeniem

Typeface.js

Podobne działanie jak Cufón, natomiast dodatkowym plusem jest nałożenie warstwy z oryginalnym tekstem, co umożliwia jego zaznaczenie i skopiowanie. W porównaniu do wyżej wymienionej biblioteki brakuje tutaj dobrego (opcje konfiguracyjne itd.) generatora fontów. No i nie za bardzo z hover'ami.

Zalety:

• możliwość zaznaczania tekstu
• działanie przy wykorzystaniu canvas/VML (po stronie przeglądarki)

Wady:

• brak obsługi hover
• brak porządnego generatora fontów online
• konieczne posiadanie odpowiedniej licencji na czcionki
• problemy pod Operą

FLiR - Facelift Image Replacement

Podmiana tekstu na obrazki przy wykorzystaniu bibliotek graficznych w PHP. Dzięki temu, że obrazki są generowane na serwerze - wygląda na to, że nie ma konieczności załatwiania dodatkowej licencji Web Embedding (na stronie nikt o tym nie wspomina - w odróżnieniu od autorów pozostałych bibliotek). Problem jest z zaznaczeniem, ponieważ jest to obrazek. Natomiast działa hover, co umożliwia podpięcie np. pod link.

Zalety:

• działa na wszystkim (co obsługuje obrazki)
• działa hover

Wady:

• brak możliwości zaznaczenia pojedynczych literek (tylko cały obrazek)
• podczas ładowania możliwe opóźnienia (konieczny czas na wygenerowanie)
• trudniejsza instalacja (trzeba skonfigurować ścieżki itp.)

SiFR

Jedna z najstarszych metod podmiany czcionki na stronie, dostępna w każdej przeglądarce. Do podmiany wykorzystujemy obiekt Flash, w którym osadzamy czcionkę. Poza problemami z zaznaczeniem (nie ma ciągłości zaznaczenia z resztą strony) oraz pewnymi niedogodnościami jak np. blokowanie oraz możliwe mulenie komputera - umożliwia wykorzystanie efektów dostępnych we Flash'u.

Zalety:

• działa na każdym komputerze z Flash'em
• możliwość osadzenia dowolnej czcionki
• możliwość wykorzystania efektów flash'owych

Wady:

• problemy związane z Flash'em: zaznaczanie tekstu, inne menu kontekstowe

Miłej podmiany czcionki!