Podczas projektowania strony internetowej nie mamy zbyt dużego wyboru jeśli chodzi o dostępne czcionki. Korzystając z HTML oraz CSS możemy standardowo wykorzystać raptem kilka fontów, które poprawnie wyświetlą się na większości urządzeń i przeglądarek. Osoby, które mają bardziej artystyczne zachcianki, muszą niestety skorzystać z elementów graficznych lub Flasha, co sprawia pewne problemy. Istnieje jednak dobre rozwiązanie problemu – deklaracja własnych czcionek w CSS przez @font-face.
Niestandardowe czcionki jako grafika
Jak już wspomniałem we wstępie, umieszczanie „graficznych tekstów” nie jest najlepszym rozwiązaniem, po pierwsze ze względu na pozycjonowanie. Dla Google bardzo ważna jest treść na naszej stronie, a w przypadku takiego podejścia nie będzie ona odczytana. Dodatkowo utrudnione będzie wprowadzanie zmian na stronie, gdyż za każdym razem będziemy musieli generować na nowo grafiki i wstawiać je na stronie. Podobne problemy może sprawiać strona przygotowana we Flashu.
Aby to zautomatyzować, możemy wykorzystać bibliotekę JavaScript Cufon. Generuje ona sama potrzebne grafiki do wprowadzonych przez nas tekstów, jednak pozostanie drugi z problemów – odczytanie ich przez wyszukiwarki internetowe.
Jeśli w graficzny sposób tworzymy tylko niewielkie części strony, menu lub nagłówek, nie będzie to problem. Co jednak zrobić w przypadku normalnych tekstów?
Wstawianie czcionek przez @font-face
Istnieje bardzo proste rozwiązanie powyższych problemów. W CSS możemy dodawać własne, niestandardowe czcionki przy pomocy @font-face. Pewną niedogodnością jest to, że poszczególne przeglądarki internetowe wykorzystują różne standardy (EOT, SVG, WOFF, TTF). Możemy jednak w jednej definicji zawrzeć różne warianty, dzięki czemu w praktycznie w każdej wygląd będzie taki, jak zamierzaliśmy (nawet w Internet Explorer 6).
Najprościej stworzyć wymagane definicje za pośrednictwem serwisu Font Squirrel. Możemy tam wybrać z całkiem pokaźnego zbioru interesującą nas czcionkę i pobrać paczkę zawierającą pliki źródłowe w różnych formatach oraz wymagany kod CSS.
Jeśli nie znajdziemy w zasobach serwisu interesującego fonta, możemy stworzyć własną definicję. Trzeba w tym celu posiadać plik TTF, z którego dostępny generator utworzy dla nas indywidualną paczkę z definicją czcionki.
Gdy posiadamy już definicję wybranej przez nasz czcionki w plikach EOT, SVG, WOFF oraz TTF należy je wgrać na serwer, a następnie określić nową czcionkę w CSS podając odpowiednie ścieżki:
@font-face {
font-family: 'KingthingsSpikelessRegular';
src: url('Kingthings_Spikeless-webfont.eot');
src: url('Kingthings_Spikeless-webfont.eot?#iefix') format('embedded-opentype'),
url('Kingthings_Spikeless-webfont.woff') format('woff'),
url('Kingthings_Spikeless-webfont.ttf') format('truetype'),
url('Kingthings_Spikeless-webfont.svg#KingthingsSpikelessRegular') format('svg');
font-weight: normal;
font-style: normal;
}
Następnie wystarczy tak zdefiniowaną czcionkę przypisać standardowo do odpowiedniego obiektu poprzez font-family:
p {font-family: KingthingsSpikelessRegular, Arial, sans-serif}
Niestandardowe czcionki z Google Web Fonts
Jeśli nie chcemy sami przygotowywać definicji czcionek i wgrywać ich na nasz serwer, możemy skorzystać z usługi Google Web Fonts. Po wyborze interesującej nas czcionki możemy ją dodać na trzy różne sposoby:
- standardowe dołączenie dokumentu CSS
<link href='http://fonts.googleapis.com/css?family=Nosifer+Caps' rel='stylesheet' type='text/css'>
-
polecenie
@importw CSS@import url(http://fonts.googleapis.com/css?family=Nosifer+Caps);
- kod Java Script
Usługa Google sama rozpozna z jakiej przeglądarki korzystamy i prześle jej odpowiednie definicje. Szybkość działania jest bardzo dobra, czcionki pojawiają się w wybranym formacie praktycznie od razu.