Na początek.
Na stronach internetowych można używać fontów ("czcionek") zainstalowanych w systemie operacyjnym, pod którym działa dana przeglądarka. Swego czasu Microsoft mocno propagował zestaw fontów zwany "Core fonts for the Web" – w założeniu zawierał on kilka fontów pomyślanych jako standard, które to każdy system operacyjny (w domyśle: Windows) powinien posiadać. Oto kilka z nich:
Arial
Comic Sans MS
Courier New
Tahoma
Times New Roman
Verdana
Impact
Używamy ich w następujący sposób, w arkuszu kaskadowych stylów, z uwzględnieniem alternatyw na wypadek braku fonta:
p {
font-family: "Times New Roman", Times, Georgia, "DejaVu Serif", serif;
}
Nie jest to dużo, ale mamy za to dobre fonty, specjalnie zaprojektowane z myślą o stronach internetowych. Niestety, jest to zestaw zauważalnie ograniczony, do tego nigdy nie możemy założyć, że końcowy użytkownik takową czcionkę posiada. W Internecie jest sporo bibliotek darmowych fontów, które to aż by się chciało zastosować na swojej stronie, a jedynym pewnym sposobem ich zastosowania jest po prostu stworzenie grafiki z tekstem i inne tego typu wynalazki. Rozwiązaniem na ten problem jest deklaracja @font-face, ujęta w specyfikacji CSS3.
Import dowolnego fontu
Aby tego dokonać, a arkuszu stylów wpisujemy następujący kod:
@font-face {
font-family: 'GunshipRegular';
src: url('gunship2.ttf') format("truetype");
}
A następnie deklarujemy font w stylu dla danego znacznika lub klasy itp. (w poniższym przykładzie zakładamy, że jej plik jest w tym samym katalogu, co plik CSS):
h3 {
font-family: 'GunshipRegular';
}
Co, teoretycznie, w rezultacie da nam takie coś:
LOREM IPSUM
A dlaczego tylko "teoretycznie"? Niestety, powyższa deklaracja @font-face jest różnie interpretowana przez różne przeglądarki (osadzanie fontów jest obsługiwane przez wszystkie nowoczesne przeglądarki, łącznie z najnowszą wersją Internet Explorera), i trzeba mocno pokombinować zduplikowanymi deklaracjami itp. po to, aby to chodziło tak jak chcemy. Dodajmy jeszcze do tego fakt, że zasadniczo nie ma zgody wśród producentów przeglądarek co do standardu formatu fontów. A do wyboru mamy, obok TrueType (który nie jest obsługiwany przez iPhone i MSIE), formaty WOFF, EOT (tylko MSIE) i SVG (tylko iPad i iPhone) i dobrze jest dostarczyć daną czcionkę w nich wszystkich. Widać od razu, że droga do typograficznego Eldorado nie jest usłana różami…
Na kłopoty – Fontsquirrel.com
Serwis Fontsquirrel.com jest repozytorium fontów dostępnych zarówno w formie plików TTF, jak i specjalnych zestawów, zawierających w sobie pliki fontów we wszystkich potrzebnych nam formatach, wraz z gotowym do wklejenia w nasze arkusze stylów kodem CSS. A więc szybko, łatwo i przyjemnie. Dodatkowo możemy wybrać podzestaw znaków ("glifów") w naszym foncie, co jest przydatne w sytuacjach, gdy np. nie przewidujemy narodowych znaków diakrytycznych i w związku z tym chcemy zmniejszyć rozmiar fonta.
Jak ja to robie?
Na moim blogu stosuje trzy fonty: "Gunship Regular" oraz "Droid Sans Regular" i "Droid Sans Bold", do każdej wygenerowałem samodzielnie zestaw korzystając z funkcji "@font-face generator" dostępnej na Fontsquirrel.com, umożliwiającej tworzenie w.w. opisanych zestawów dla fontów dostarczonych przez użytkownika.
@font-face {
font-family: 'GunshipRegular';
src: url('gunship2.eot');
src: local('☺'), url('gunship2.woff') format('woff'),
url('gunship2.ttf') format('truetype'),
url('gunship2.svg#webfont') format('svg');
}
@font-face {
font-family: 'DroidSansBold';
src: url('droidsans-bold.eot');
src: local('☺'), url('droidsans-bold.woff') format('woff'),
url('droidsans-bold.ttf') format('truetype'),
url('droidsans-bold.svg#webfont') format('svg');
}
@font-face {
font-family: 'DroidSansRegular';
src: url('droidsans.eot');
src: local('Droid Sans'), local('DroidSans'),
url('droidsans.woff') format('woff'), url('droidsans.ttf') format('truetype'),
url('droidsans.svg#webfont') format('svg');
}
Fonty a paragraf.
Trzeba pamiętać, że z punktu czysto prawnego, osadzanie fontów na stronach internetowych jest traktowane jak ich redystrybucja, co w praktyce w przypadku fontów komercyjnych podpada pod złamanie umów końcowego użytkownika i prawa autorskiego. Aby uniknąć kłopotów, trzeba uważnie czytać licencje fontów pod kątem tego, czy ich twórcy zezwalają na ich redystrybucje przez osoby trzecie. Wątpliwości tego typu nie ma w przypadku fontów "open source" opartych na licencji GNU lub podobnej.
Takimi czcionkami są fonty dostępne na Fontsquirrel.com.