Zoals je waarschijnlijk wel weet kun je niet zomaar elk willekeurig lettertype gebruiken op je website. De persoon die jouw website bekijkt moet namelijk ook beschikken over hetzelfde lettertype. In het verleden hebben we bijvoorbeeld als oplossing aangedragen om afbeeldingen te maken van je headlines. Dit heeft echter als gevolg dat je hopen afbeeldingen moet maken om je site een beetje leuk op te sieren. En dat deze niet (goed) opgenomen kunnen worden door zoekmachines is natuurlijk helemaal vervelend.

Goed nieuws!

Inmiddels is er een nieuwe oplossing voor dit probleem: sIFR (Scalable Inman Flash Replacement). sIFR maakt gebruik van javascript en CSS in combinatie met een klein flashbestandje (swf) waarin het te gebruiken lettertype zit.

Dit heeft als groot voordeel dat alle mogelijke fonts gebruikt kunnen worden zonder dat dit ten koste gaat van zoekmachineoptimalisatie van de pagina. De teksten die je voorziet van sIFR worden namelijk niet veranderd in een afbeelding, maar blijven gewoon tekst. Die is dan ook gewoon te indexeren en te selecteren.

Misschien heb je sIFR al eens actief gezien, het wordt namelijk steeds meer toegepast. Voor een voorbeeld kun je eens kijken op de volgende website:

www.purpleandbrown.eu

Je ziet hier dat de kopjes boven de filmpjes voorzien zijn van een speciaal lettertype: met sIFR!

sIFR installeren

Klik hier om sIFR te downloaden (kies voor 'Opslaan').
Zoek het bestand op je computer en pak het uit (.zip).
Open de uitgepakte map en kopieer de volgende bestanden:

sifr.js
sifr-addons.js
sIFR-print.css
sIFR-screen.css

Plaats deze bestanden vervolgens op je server.

Speciale lettertypes downloaden

Voordat we verdergaan is het verstandig om alvast uit te zoeken welk lettertype je wilt gaan gebruiken voor je headlines.

Neem eens een kijkje op http://www.fontsmack.com/fonts
Dit zijn allemaal lettertypen, klaar voor gebruik met sIFR.
Als je een lettertype dat je wilt gebruiken gevonden hebt, klik dan op 'View Font Details' en vervolgens op een downloadlink (onder 'File' in de tabel).
Je zult zien dat het om een .swf-bestand gaat. Dit bestand mag je nu ook uploaden naar je server.

sIFR toepassen op je headlines
Open nu de html-pagina van jouw website waar je sIFR in wilt gebruiken
Plak tussen < head> en < /head> de volgende code:

<link rel="stylesheet" href="sIFR-screen.css"
mce_href="sIFR-screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="sIFR-print.css" mce_href="sIFR-print.css"
type="text/css" media="print" />
<script src="sifr.js" mce_src="sifr.js"
type="text/javascript"></script>
<script src="sifr-addons.js" mce_src="sifr-addons.js"
type="text/javascript"></script>

Plak vervolgens net boven < /body> de volgende code:

<script type="text/javascript">
//<![CDATA[
/* Replacement calls. Please see documentation for more information. */
if(typeof sIFR == "function"){
// This is the preferred "named argument" syntax
sIFR.replaceElement(named({sSelector:"body h1", sFlashSrc:"vandenkeere.swf",
sColor:"#000000", sLinkColor:"#000000", sBgColor:"#FFFFFF",
sHoverColor:"#CCCCCC", nPaddingTop:20, nPaddingBottom:20,
sFlashVars:"textalign=center&offsetTop=6"}));
// This is the older, ordered syntax
sIFR.replaceElement("h5#pullquote", "vandenkeere.swf", "#000000", "#000000",
"#FFFFFF", "#FFFFFF", 0, 0, 0, 0);
sIFR.replaceElement("h2", "tradegothic.swf", "#000000", null, null, null, 0, 0,
0, 0);
sIFR.replaceElement("h4.subhead", "tradegothic.swf", "#660000", null, null,
null, 0, 0, 0, 0);
sIFR.replaceElement("h3.sidebox","tradegothic.swf","#000000", "#000000",
"#DCDCDC", "#DCDCDC", 0, 0, 0, 0, null);
sIFR.replaceElement("h3", "tradegothic.swf", "#000000", null, null, null, 0, 0,
0, 0, null);
};
//]]>
</script>

Je ziet in dit gedeelte al wat voorbeelden staan. Die moet je nu aan gaan passen naar jouw wensen. Verander bijvoorbeeld 'tradegotic.swf' in 'jouwlettertype.swf'.
Ook de kleuren kun je hier aanpassen, aangegeven als bijvoorbeeld '#000000'. Vervang in dit voorbeeld de nullen door de kleurcode van jouw keuze. Deze kleurcodes vind je bijvoorbeeld in je website of in een grafisch programma.

Als je helemaal klaar bent en alles is naar je zin ingesteld, dan hoef je alleen per headline aan te geven of het H1, H2, H3 etc. is en de titels zullen vervangen worden door sIFR.

In de code doe je dit als volgt:

<h1>Dit is een titel in heading 1</h1>

Tip: Veel html-bewerkingsprogramma's hebben een dropdownlijst met daarin de verschillende typen headings. Selecteer een headline en kies vervolgens in dit lijstje welke heading je wilt gebruiken. Het programma vult dan automatisch H1 enzovoort in de code in.

Nog veel meer mogelijk

Tot slot nog een belangrijke mededeling. Het gebruik van sIFR lijkt in eerste instantie niet eenvoudig. Er is zoveel in te stellen dat ik me voor kan stellen dat beginners er op sommige punten wat moeite mee hebben. Deze beschrijving is zo standaard mogelijk gehouden. Er is echter veel meer mogelijk en ik wil je dus ook aanmoedigen om er zelf mee te experimenteren en je er verder in te verdiepen. Gevorderde webmasters zullen al snel van de bovenstaande beschrijving afbuigen om hun eigen weg te gaan. Dit is voor hen ook aan te raden omdat sommige gedeeltes op een nettere manier in de code kunnen. Dit is echter te complex om voor beginners uit te leggen. Kijk voor aanvullende informatie op de volgende websites:

http://wiki.novemberborn.net/sifr/

http://www.gigadesign.be/?p=254

Veel succes!