Kleine Helfer

Professionelle JavaScript-Tools fürs Web 2.0

06.05.2013
Von 
Diego Wyllie hat Wirtschaftsinformatik an der TU München studiert und verbringt als Softwareentwickler und Fachautor viel Zeit mit Schreiben – entweder Programmcode für Web- und Mobile-Anwendungen oder Fachartikel rund um Softwarethemen.

10. Cufón: Beliebige Schriftarten im Web

Cufón
Cufón
Foto: Diego Wyllie

Web-Designer mussten vor nicht allzu langer Zeit auf Flash zurückgreifen, wenn sie in ihren Projekten Schriftarten verwenden wollten, die dem Webstandard nicht entsprechen. Mit Hilfe von "Cufón” können sie nun auf Adobes Technologie ganz verzichten. Das Tool basiert vollständig auf JavaScript, lässt sich mit jedem der vorgestellten Frameworks integrieren, und bietet eine besonders einfache Möglichkeit, jede noch so exotische Schriftart im Web einsetzen zu können. Der Clou: Schriftarten werden unter Verwendung eines Online-Tools, dem "Cufón Generator”, in ein proprietäres Format konvertiert und in einer JavaScript- beziehungsweise Json-Datei gespeichert, die dann von der integrierten Engine genutzt wird, um die Fonts zu rendern.

Die Schrifteinbettung geht mit dem Cross-Browser-kompatiblen Tool recht unkompliziert. Zunächst muss man zwei Sourcecode-Dateien in die Website einbinden: Die Core-Bibliothek "Cufon-yui.js” und die mit dem Cufón Generator erzeugte Font-Datei. Per JavaScript lässt sich dann definieren, in welchen Html-Elementen die integrierte Schriftart verwenden werden soll. Dann genügt ein einfacher Funktionsaufruf wie "Cufon.replace('h1')”, um sämtliche H1-Überschriften in der gewünschten Schriftart auszugeben. Natürlich lassen sich mehrere Schriftarten in einer Webseite verwenden. Dazu braucht man lediglich die entsprechenden Font-Dateien hinzufügen und beim Funktionsaufruf den Namen der gewünschten Font übergeben.