Web Tutorials

Dreamweaver | Webdesign | Web Tutorials

Gebruik alle fonts je zelf wil in je website met Flir

Flir, Facelift Image Replacement, is een script om welke font dan ook in je website te gebruiken zonder dat je gebruik moet maken van een image gemaakt in Photoshop of Fireworks.

Je kan door middel van enkel lijnen code je tekst omzetten naar een font naar wens, elk font die je wil.

Heel handig als je denkt in termen van zoekmachine optimalisatie. Nu kan de zoekmachine de tekst inlezen en komt hij geen onleesbare image meer tegen.

Een tutorial hoe je dit implementeert in je website.

Wat heb je nodig?

• Een server met PHP ondersteuning : PHP 5 is aanbevolen.
• Een server met GD.
• ImageMagick op de server is nodig voor bepaalde fonts.

Downloaden en plaatsen van bestanden

Download facelift, deze bestanden heb je nodig.

Eens je deze download binnen hebt pak je het bestand uit met het programma Winrar en plaats je de map in de root van je directory. Dit is waar je index pagina staat, in normale omstandigheden.

Fonts installeren

Download de fonts welke je wil gebruiken en voeg deze bij in de map ‘fonts’.

Config-flir.php instellen

Nu je bestanden uitgepakt zijn op de juiste plaats staan open je de file config-flir.php en zie je enkele voorwaarden staan die je naar eigen smaak kan aanpassen. Indien je de ‘define’ voorwaarden wil aanpassen, is niet verplicht, kan je best de documentatie van Flir zelf doornemen. Voor alles is er een uitgebreide uitleg voorzien.

Belangrijkste in dit document is dat je moet aangeven welke fonts je gaat gebruiken. Dat doe je met de volgende regels

// Each font you want to use should have an entry in the fonts array.
$fonts = array();
$fonts['illuminating'] 	= 'ArtOfIlluminating.ttf';
$fonts['okolaks'] 		= 'okolaksBold.ttf';
$fonts['wanta'] 			= 'wanta_091.ttf';

Dit is een array van fonts. Wil je bijvoorbeeld de font webtutorials.ttf(is enkel een voorbeeld, deze font bestaat niet) gebruiken in je website voeg dan volgende regel toe :

$fonts['webtutorials'] 	= 'webtutorials.ttf';

De naam tussen de aanhalingstekens in de $fonts array gaan we later nog gebruiken in de CSS om de font op te roepen.

Iets lager zien we de volgende code staan :

// The font will default to the following (put your most common font here).
$fonts['default'] 		= $fonts['okolaks'];

In deze regel kan je aangeven welke font standaard wordt gebruikt als er geen font wordt aangeroepen.

Meer moet je niet aanpassen in deze file. De belangrijkste zaken zijn dus

- Het toevoegen van fonts welke je wenst te gebruiken.
- Een default font aangeven als er geen wordt aangeroepen.

Flir.js instellen

In de file flir.js moet je het pad ingeven naar de facelift map welke je in de root van je directory hebt geplaatst.

path: 'pad/naar je facelift map'

Flir.js oproepen

Om Flir te doen werken moet je in de head van elke pagina een Javascript regel plaatsen om flir.js aan te roepen. Plaats deze regel in de head van de pagina :

<script src="pad/naar je flir.js file" type="text/javascript"></script>

Vergeet bij bovenstaande code niet het pad aan te passen.

Javascript toevoegen

Heel belangrike stap. Voeg volgende code toe juist boven de afsluiting van je body, , zonder de juiste plaatsing van deze code zal het niet werken. :

<script type="text/javascript">
    FLIR.init();
    FLIR.auto();
</script>

Tekst opmaken

Flir zal standaard alle teksten welke tussen headings(alleen headings) staan automatisch aanpassen, van H1 tem H5. Wil je dit aanpassen dan kan je dit aanpassen in de bovenstaande Javascript welke we juist hebben toegevoegd boven de afsluiting van de body. Met deze regel :

    FLIR.auto();

Indien je wil dat de opmaak enkel op de ‘h2′ heading wordt toegepast dan ziet deze code er zo uit :

    FLIR.auto('h2');

Enkel op ‘h1′, ‘p’ en ‘em’ dan ziet de code er zo uit :

    FLIR.auto('h1', 'p', 'em');

Je kan ook een element toevoegen gecombineerd met een div. Op deze manier wordt dit element enkel omgevormd in een bepaalde div. Bv :

    FLIR.auto('p#header');

CSS aanpassen

Nu alle instellingen zijn ingegeven moet de font nog aangeroepen worden via CSS.

h1 { font-family: illuminating, Arial, sans-serif; }
p { font-family: okolaks, Arial, sans-serif; }
em { font-family: webtutorials, Arial, sans-serif; }

De eerste font aangegeven in de font-family is de font welke je hebt geïnstalleerd en geconfigureerd in je config-flir.php file. Herinner je je de naam die je ingegeven hebt in de array nog? Wel, dit is nu degene die aangeroepen wordt.

Alles is nu ingesteld en aangepast. Het lijkt een hele boterham maar dat is het helemaal niet, in principe moet je enkel volgende dingen doen :

• Gewenste fonts downloaden en uploaden in de map fonts.
• Config-flir.php aanpassen.
• Flir.js aanpassen.
• 2x javascript invoegen en eventueel aanpassen.
• CSS aanpassen.

Ben benieuwd of er iemand mee gaat experimenteren en hoop hier enkele mooie resultaten te zien verschijnen. Plaats gerust een link naar je Flir toepassing.

Nog vragen? Bezoek het forum...

Indien je het nuttig vond mag je altijd een bericht achterlaten of u inschrijven op onze nieuwsbrief om altijd op de hoogte te blijven.

Copyright 2008. Web Tutorials. All rights reserved