Saját betűk használata honlapunkon

Az úgy nevezett font embedelés, nem egy mai dolog, azonban számos böngésző képtelen volt sokáig lekezelni ezeket az egyedi betűtípusokat így a helyükön a szokásos Times New Román jelent meg. A kor előre haladtával bátran elmondhatjuk, hogy egyedül az Internet Explorer miatt van erre a bejegyzésre igazán nagy szükség mert a többi web browser már igen jól kezeli a TTF (True Type Font) beágyazásokat. Lássuk tehát pár lépésben miként is jeleníthetjük meg írásainkat egyedi betűtípussal az oldalainkon.

1. Töltsünk le egy ingyenes betűtípust
   Fontos, hogy ingyenes betűtípust szedjünk les hiszen később komoly szerzőjogi vitákba bonyolódhatunk, amihez szerintem senkinek nincs túl sok ingere. Ajánlott oldalak:
   1001freefonts.com, dafont.com
2. Miután megvan a betűtípus nézzük meg, hogy a TTF kiterjesztésű mellé csomagoltak-e EOT (Embed Open Type) formátumú fájlt is. Ha nem akkor látogassunk el a TTF to EOT (by kirsle.net) oldalra és konvertáljuk át egy laza mozdulattal a betűtípusunkat.
3. Most hogy megvan a .ttf és a .eot kiterjesztésű fájlunk is jelen esetben a showcard.ttf és a showcard.eot. Mindkettőt másoljuk fel az FTP-nkre mondjuk egy "font" nevű mappába.
4. Amennyiben nem használunk css fájlt fogjuk és az oldalunk tagjai közé tegyük be az alábbi minta alapján a saját betűtípusunkat behívó pár sort:


@font-face {font-family: 'Showcard'; src: url('font/show.eot'); src: local('☺'), url('font/show.ttf') format('truetype'); }
body {font-size: 19px; font-family:Showcard;}


Sokan biztosan elsőként észreveszik, hogy miért is van a local tag után mosolygós arc. Ennek oka, hogy oda igazából bármit írhatunk, csak ügyelnünk kell arra, hogy egyetlen felhasználónak se legyen olyan nevű könyvtára, hiszen akkor onnét keresné a böngésző a betűtípust. Szerencsére egyetlen operációs rendszer sem hagyja a "mosolygósarc" nevű könyvtárak létrehozását így ez egy biztos karakter, amivel garantált lehet a siker.

5. Már készen is vagyunk, ha mindent jól csináltunk oldalunkon minden, szöveg Showcard betűtípussal lesz írva.

Természetesen, amennyiben csak bizonyos szöveg részeket szeretnénk kiemelni vagy más betűtípussal írni akkor bármikor a CSS-ünkben hivatkozhatunk a font-family: Showcard attribútummal akár Heading tagoknál akár bárhol máshol. Például:

h1 {font-size: 26px; font-family:Showcard;}

 

A demo-t innét tudjátok letölteni vagy megtekinteni:

• Font embed példa demo letöltése
• Live demo