Schriftarteneinsatz im Web mit cufón

23. Mai 2010 // Web Design, Web Entwicklung // Kommentieren

Ich hab bereits einige male auf sIFR zurückgegriffen wenn exotische Schriftarten für Überschriften oder ähnliches erforderlich waren. Dabei werden bestimmte Textpassagen per JavaScript durch ein Flash Objekt ausgetauscht, welches bekanntlich die Möglichkeit besitzt Schriftarten einzubetten. Das erfordert jedoch einiges an Konfigurationsaufwand, und das Ergebnis (auch wenn es schön aussieht) hat leider einge Nachteile.

Enter cufòn.

Cufón versteht sich als einfachere Alternative zu sIFR, funktioniert ähnlich, aber verzichtet dabei völlig auf die Zuhilfenahme von Flash. Um dies zu ermöglichen müssen Schriftarten erst in ein proprietäres Format umgewandelt werden (das kann man bequem per Online Generator machen) – in diesem Format lässt sich die Schrift nun per JavaScript “rendern” – ganz ohne Flash. Wie genau das funktioniert ist hier erklärt.

Es werden also 2 JavaScript Files eingebunden, einmal das cufón Script, und einmal die umgewandelte Schriftart. Danach lassen sich Elemente folgendermaßen mit cufón “behandeln”:

Cufon.replace('h2');

Et voilá, alle h2 Überschriften sollten nun durch die neue Schriftart ersetzt worden sein.

Auch Farbverläufe und Hover Effekte lassen sich damit schnell und einfach konfigurieren:

Cufon.replace('.menu',{
  color: '-linear-gradient(#666666, #000000)',
  hover: {
    textShadow: '1px 1px #bbbbbb',
    color: '-linear-gradient(#445510,#9cc325)'
  }
});

Eine Schritt für Schritt Anleitung findet sich auf der offiziellen Seite.

Diesen Eintrag kommentieren