Tieto časy sú pre webdesign veľmi vzrušujúce. Máme tu nové možnosti, ako skĺbiť typografiu, ktorá sa v "starých časoch", ktoré ešte kvôli ich neokrôchanosti a obmedzenosti nemožno nazvať zlatými, neoznačuje ako "web-safe", s dnešným webom. Áno, užívateľov máme rôznych a aj naše možnosti sú obmedzené množinou koncových návštevníkov výsledneho www diela - a hlavne ich najslabšími článkami. Čo ak budú nový web mestského úradu (MOJA POZN = tam, kde sa vyplácajú dávky, aby to bolo vtipné) navštevovať občania s neprispôsobivými prehliadačmi? 

Odhliadnime na chvíľu od všetkých tých pomaly ustupujúcich nemožností tejto doby. Stále bude totiž namieste pri progresívnejších riešeniach myslieť na fall-back alebo backward compatibility. V najhoršom prípade si totiž prehliadač vyberie jeden z bezpečných fontov v css pravidle, ktorý je v danom počítači obsiahnutý. Len ho v tej hýrivosti novonájdených možnosti nesmieme zabudnúť určiť. 

A teraz k veci. Nebudem sa už zdržiavať básnickými prívlastkami. Nasledovné je tutoriál, ktorým vložíte na svoj webík samotný font (áno, súbor, a to hneď vo viacerých verziách pre rôzne prehliadače) a použíjete ho v CSS dvoma nežnými pravidlami. 

1. Vyberte font.

http://www.fontsquirrel.com/fontface

Poznámka: pri výbere fontu skontrolujte jeho licenciu; či už by ste sa mohli pre jeho neoprávnené komerčné použitie dostať do opletačiek alebo nie, je to celkom fér. Fonty na stránke fontsquirell sú našťastie starostliov vyberané práve pre ich možnosť použitia v komerčinách, niekedy si však autor praje udať mu "kredit" (linku k jeho homepage zo stránky, kde je jeho font použítý) alebo by si nerád našiel svoj font vnorený v softwari, ktorý sa hromadne predáva.

Stiahnite balíček a nahrajte font na server, v tomto príklade do /css adresára.

2. Pridajte do CSSka pár riadkov, nezabudnite si skontrolovať cestu k fontom a názov

@font-face {
    font-family: 'Puritan20Bold';
    src: url('css/Puritan_Bold-webfont.eot');
    src: url('css/Puritan_Bold-webfont.eot?#iefix') format('eot'),
         url('css/Puritan_Bold-webfont.woff') format('woff'),
         url('css/Puritan_Bold-webfont.ttf') format('truetype'),
         url('css/Puritan_Bold-webfont.svg#webfonthMKzIXYd') format('svg');
    font-weight: normal;
    font-style: normal;
}

Nezdržujme sa zbytočne tým, ktorý typ súboru ladí s ktorým prehliadačom, aj tak to nikoho nezaujíma. Dôležité je, že sme pokryli všetky možnosti.

3. Niekde ďalej v CSSku...

h3 {font-family: 'Puritan20Bold','Trebuchet MS', Arial, sans-serif;} 

Poznámka: Ostatné názvy fontov, od Trebuchetu cez Arial až k rodine sans-serif, sú v tomto pravidle práve z dôvodu spätnej kompatibility. Ak ste zabudli, o čom táram, čítajte tento článok znovu. 

Vualá!

Come'on baby, let's go party...!