- 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 - 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.
- 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.
- 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:
- Már készen is vagyunk, ha mindent jól csináltunk oldalunkon minden, szöveg Showcard betűtípussal lesz írva.
@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.
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:
