Dowolne czcionki na stronach www

Przedstawię wg mnie najlepsze techniki używania dowolnych czcionek na stronach www. Oczywiście bez wykorzystywania obrazków :). Mianowicie @font-face (reguła CSS3) i Cufon.

@font-face

Najprościej rzecz ujmując jest to reguła dołączająca zewnętrzny plik z czcionką. Czcionka tak zdefiniowana, może być potem używana przy definicji reguły font-family. Podstawowa składnia przedstawia się następująco

@font-face {
	font-family: CABNDWebBold;
	src: url('CABNDWebBold.otf');
}

Później tak wcześniej zdefiniowaną czcionkę używamy już w dobrze znany w css sposób np.

font-family: CABNDWebBold, Arial, Helvetica, sans-serif;

Proste prawda? Jednak nie wszystko jest takie piękne. Problemem jest obsługa formatów czcionek przez różne przeglądarki:

Internet Explorer obsługuje tylko EOT
Mozilla obsługuje OTF and TTF
Safari i Opera OTF, TTF and SVG
Google Chrome TTF and SVG

W celu obsłużenia wszystkich przeglądarek należy użyć czcionek w dwóch formatach .eot (dla IE) i .ttf (dla reszty). Należy pamiętać aby reguła dla IE była pierwsza.

@font-face {
  font-family: YanoneKaffeesatz-Regular;
  src: url(yanonekaffeesatz-regular-webfont.eot);
}

@font-face {
  font-family: YanoneKaffeesatz-Regular;
  src: url(YanoneKaffeesatz-Regular.ttf) format("opentype");

}
h1 {
font-family: YanoneKaffeesatz-Regular, Arial, Helvetica, sans-serif;
}

Stworzenie czcionek EOT jest możliwe dzięki zastosowaniu konwerterów czcionek np. ttftoeot lub fontface generator. Więcej na temat wstawiania czcionek za pomocą font-face można przeczytać na blogu.

Cufon

Cufon równiż pozwala na wstawienie na stronę dowolnej czcionki. Korzysta on HTML5 canvas. Skrypt działa na Internet Explorerze 6, 7 i 8, Firefoksie 2 i 3, Operze 9.x, Safari 3 oraz innych przeglądarkach bazujących na WebKicie. Zatem do dzieła! Najpierw musimy wygenerować odpowiedni plik javascript na stronie Cufona. Jeżeli chcemy obsługiwać polskie znaki to w zakładce "include the following glyphs" wybieramy: Basic Latin, Latin-1 Supplement, Latin-Extended-A oraz Latin-Extended-B. Następnie w kodzie strony dodajemy odpowiednie skrypty.

<script src="cufon-yui.js" type="text/javascript"></script>
<script src="Yanone_Kaffeesatz_Rg_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1.title');//oznacza, że nagłówek h1 o klasie title podmieniamy Cufonem
</script>

Dodatkowe opcje Cufona pozwalają między innymi definiować wiele czcionek, dodawać cień oraz efekt hover.

Cufon.replace('h1', { fontFamily: 'Yanone Kaffeesatz Rg' });
Cufon.replace('h2', { fontFamily: 'CA BND Web Bold' });

Cufon.replace('h1', {
	textShadow: '-2px -2px rgba(51, 51, 51, 1)'
});

Cufon.replace('#menu * a', {
	hover: {color:'#f28900'}
});

Więcej informacji na temat API Cufona.
Polecane adresy:
webfonts.info
fontsquirrel.com
Przykład zastosowania @font-face i Cufona