Jeste li ikad pomislili kako bi bilo lijepo kad bi mogli staviti neki svoj ili tuđi font na web stranicu? Iako CSS ima mogućnost postavke vrste fonta, ukoliko se taj font ne nalazi na korisnikovom računalu neće se prikazati. Trenutno najučestaliji način je kreiranje slike sa željenim tekstom i fontom.

Ovaj način, iako radi svugdje ima podosta mana. Za početak, odlučite se promijeniti tekst… i onda slijedi otvaranje vaše slike, promjena teksta, spremanje, upload na server i refresh par puta. Druga velika mana je što ga tražilice ne prepoznaju, tako da ako želite imati solidan rank na googlu zaboravite naslove u slikama. Srećom, postoji par načina kako se može vaš font postaviti na web.

• Prvi način je dinamička zamijena teksta sa slikom. Ustvari, radi se o javascript tehnologiji koja prepoznaje određenu klasu koju ste dali elementu i prema njoj pretvara tekst u sliku sa željenim fontom.
• Drugi način je flash. Ovime se također zamijenjuje tekst,a li ovaj puta sa flash objektom koji daje jednu dodatnu pogodnost – tekst se može selektirati, te je kompaktibilan sa tražilicama.

Što se tiče zamijene teksta sa slikom, postoji više alternativa. Uz typeface kojeg ćemo ovdje obraditi, postoji i pcdtr (PHP + CSS Dynamic Text Replacement), te još neki. Mana im je svima da tekst ne možete selektirati, a i Google ne prepoznaje tekst koji se nalazi u slici (navodno rade na tome).

Typeface možete skinuti ovdje. Svoj font (koja mora biti Truetype Font) morate preformatirati u poseban javascript fajl – ovo radite na stranici typeface-a, i to ovdje. Dakle, uploadate svoj Truetype font i dobit ćete javascript datoteku koju typeface koristi kako bi vaš font prikazao u slici.

Nakon što imate svoj font i skinuti typeface u javascriptu, sve to uključite u svoju web stranicu. Vrlo je važno da ga uključite nakon svih ostalih css i js datoteka.

1
2
3
4
5
6
7

<!-- uključite prvo ostale css stylesheet-ove -->
 <link rel="stylesheet" type="text/css" ref="/style.css">
 
<!-- nakon toga uključite typeface.js i typeface.js fontove -->
 
<script src="typeface-0.10.js" type="text/javascript"><!--mce:0--></script>
<script src="helvetiker_regular.typeface.js" type="text/javascript"></script>

Kada su javascript datoteke uključene u html, možete početi ga koristiti. Korištenje je vrlo jednostavno, sve što trebate je elementu kojem želite dati određeni font dati typeface-js klasu i preko css-a odrediti koji font će koristiti:

1
2
3

<div class="header typeface-js" style="font-family: Helvetiker">
      Ovdje je tekst u Helvetiker fontu...
</div>

Druga tehnologija za prikaz vaših fontova se oslanja na flash i za sada jedina nudi mogućnost selektiranja teksta. Radi se o sIFR 3. Iako dosta nadmoćniji od ostatka alternative, za njega se ipak treba malo namučiti.

Za početak trebat će vam Adobe Flash, pošto svoje fontove morate pretvoriti u .swf datoteke kako bi ih sIFR mogao korisiti. Stvaranje tih datoteka je ustvari jako jednostavno, u Flash-u otvorite sifr.fla datoteku koju ćete dobiti kada skinete sIFR, te kliknite na bijelo polje.

Trebali biste vidjeti “Bold Italic Normal” tekst. Kako biste minimizirali svoje flash datoteke, samo ostavite jedno slovo od svakog tipa (npr. b i n) te naravno odaberite da su ta slova u fontu kojeg želite na webu.

Kada ste tekst postavili na font koji želite, kliknite File -> Export -> Export Movie… te u prozoru koji će se otvoriti odaberite sljedeće postavke:

Datoteku spremite pod prepoznatljivim nazivom (najbolje nešto tipa ime_fonta_sifr.swf), kako biste se znali kasnije snaći u tim svim datotekama.

Sljedeći korak je uključivanje css-a i javascripta u vaš html:

1
2

<script src="sifr.js" type="text/javascript"></script>
<script src="sifr-config.js" type="text/javascript"></script>

Nakon toga, otvorite sIFR-config.js te umjesto defaultnih postavli unesete:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//varijablu nazovite kao što je vaše ime fonta (ili ime .sfw fajla koji ste napravili)
var ime_fonta = {
	//putanja je relativna u odnosu na ovaj sifr-config.js fajl ili možete koristiti apsolutnu http://www.domena.com/fonts/ime_fonta.swf
	src: 'putanja_do_/ime_fonta.swf'
};
sIFR.activate(ime_fonta);
sIFR.replace(ime_fonta, {
	//ovdje odabirete na koju klasu/element/id će se upotrijebiti sIFR
	selector: 'h2.naslov',
	//ovdje možete unjeti obične css postavke koje želite primjeniti na font (nažalost, za sada nije podržano učitavanje sa vanjskog css-a)
	css: [
		'.sIFR-root {font-size:24px; font-weight:normal; color:#9f0000;}'
	],
	//označava da će pozadina biti prozirna (po defaultu je bijela)
	wmode: 'transparent'
});

I to je to, ovaj postupak možete ponoviti koliko god puta treba za svaki font (s time da u sIFR-config.js samo prekopirate ovaj kod i unesete nove vrijednosti).