Blog

Cufón – Schrifteinbindung für alle Browser

Leider ist es im Browser nicht möglich jede beliebige Schriftart für die Darstellung von Webseiten zu verwenden – die Auswahl beschränkt sich hier stets auf die auf dem Benutzersystem installierten Schriften.

Um diesem “Manko” aus dem Weg zu gehen, gibt es schon seit einigen Jahren verschiedene Lösungen – sIFR war bisher eine recht verbreitete Methode – hier wurde der Text durch gerenderten Flash-Text ersetzt. Dies setzt dann natürlich ein installiertes Flash Plugin vorraus und sorgt beim ersten Laden der Seite ab und an für ein unschönes Flackern.

Doch es geht auch anders

Mit Cufón wurde eine Technik entwickelt, die es ebenfalls erlaubt “browserfremde Schriften” einzubinden – hier geht man den Umweg über Javascript. Die Schrift wird im Javascript Format gespeichert und über das Plugin entsprechend eingebunden. Die Schriften müssen nicht auf dem Rechner des Betrachters liegen, beziehungsweise installiert sein. Sie liegen auf dem Server der Website und werden vom Browser aufgerufen und verarbeitet.

Vorteile von Cufon

• keine Plugins erforderlich
• Unterstützung von zahlreichen Browsern
• einfach einzusetzen
• schnell
• suchmaschinenfreundlich
• Fallback bei deaktiviertem JavaScript

Nachteile

• Text lässt sich im Browser nicht mehr markieren
• funktioniert nur mit JavaScript, bei deaktiviertem JavaScript wird der Inhalt aber trotzdem angezeigt

Wie funktioniert Cufón?

Cufón besteht aus zwei Teilen: einem Font-Generator, der Schriftarten in ein proprietäres Format konvertiert sowie einer in JavaScript geschriebenen Render-Engine.

Generator
Der Generator ist eine aufgebohrte Webschnittstelle zu FontForge, einem Open-Source-Schriftarteditor. Zunächst erzeugt der Generator ein FontForge-Skript, das die zu erzeugende Schriftart in einen SVG-Font wandelt. Im zweoten Schritt wandelt er dann die SVG-Pfade in VML-Pfade. Das resultierende Dokument wird in eine JSON-Datei gewandelt, die auch einige JavaScript-Elemente enthält. Das ermöglicht die einfache Einbindung per <script>-Tag sowie eine hohe Kompression der ursprünglichen Schriftartdatei. Außerdem erfolgt die Einbindung dann auch flackerfrei.

Renderer
Beim Rendern wird die Sache etwas komplizierter: der Renderer besteht aus drei Teilen – einem Kern, der verschiedene Schnittstellen und allgemeine Funktionalitäten bereitstellt sowie zwei Render-Engines. Die eine rendert VML, was vom Internet Explorer seit Version 5.5 unterstützt wird, während die andere das weit verbreitete HTML5-Element <canvas> verwendet.

Die genaue Funktionsweise ist im englischen Wiki beschrieben.

Besonderheit: Internet Explorer 7
Der Internet Explorer kocht wieder einmal sein eigenes Süppchen: während die anderen Browser die Schriftumwandlung direkt darstellen, kann es beim IE7 zu einem kurzen Flackern kommen, das man mit folgendem JavaScript-Aufruf direkt vor dem schließenden Body-Tag beheben kann:

Code

<script type="text/javascript"> Cufon.now(); </script>
</body>
</html>

Tipp: Bei der Verwendung von Google Analytics oder Piwik sollte die JS-Funktion vor dem Tracking-Code eingebunden werden. Der Aufruf dieser Funktion ist auch bei der Verwendung von JavaScript-Code innerhalb des Body-Tags für alle anderen Browser ratsam, um das nervige Flackern zu verhindern.

Lizenzen beachten

Unabhängig von den oben genannten Lösungen ist die Tatsache, dass man für kommerzielle Schriftarten (wie z.B. Frutiger, Univers, Optima oder Futura) eine entsprechende Lizenz benötigt und eine solche Schrift nicht ohne Weiteres benutzen kann. Hierfür stehen aber etliche freie Fonts zur Verfügung, die auf diversen Websites zu finden sind.

Einbindung in TYPO3

Die Einbindung stellt sich recht einfach dar: Cufón-JavaScript und gerenderten Font einbinden, Tags definieren, für die Cufón die Schrift ersetzen soll und fertig.

Code

<script type="text/javascript" src="/js/cufon-yui.js"></script>
<script type="text/javascript" src="/js/MankSans-Medium_500.font.js"></script>
<script type="text/javascript">
    Cufon.replace('h1') ('h2') ('h3') ('h4') ('.phone') ('.textslide p') ('.pf-title');
</script>

Das geht in Typoscript am einfachsten mit der HeaderData-Deklaration:

Code

page.headerData = COA
page.headerData.11 = TEXT
page.headerData.11.value = <script type="text/javascript" src="fileadmin/template/js/cufon-yui.js"></script>

Verwendung in Projekten

Wir verwenden Cufón unter anderem auf dieser Website, aber z.B. auch auf der Website des Ofenbauers Werner Hilzinger.

Keine Kommentare möglich.