Oft möchte man beim Erstellen einer Webseite auf seine eigenen Schriftarten zurückgreifen. Nur leider geht das im Web nicht so einfach – oder soll ich sagen “ging nicht so einfach”? Ich habe nun eine Möglichkeit gefunden, TrueType Schriften (wie man sie unter Windows als normale Schriftart kennt) in seinen eigenen Blog/Website bringt. Ich zeige, wie man das anstellt.
Technisch wird das Ganze mit Canvas und VML gelöst. Eine kurze Erläuterung von Wikipedia für diie, die nicht wissen, was es ist. Ich wusste es selbst nicht.
Das Canvas-Element ist Bestandteil von HTML5 und gestattet ein dynamisches Rendern von Vektorgrafiken und Bitmap-Grafiken.
Die Vector Markup Language (VML) ist eine Auszeichnungssprache zur Beschreibung zweidimensionaler Vektorgrafiken in XML.
Aber keine Sorge, es ist ganz einfach.
Schritt 1: Cufon-YUI auf Webspace laden. Das ist die komprimierte Version mit nur 18 KB. Für Javascript-Bibliotheken empfehle ich immer einen seperaten Ordner.
Schritt 2: Jetzt muss Cufon Eure Schriftart Cufon-fähig machen. Lade dazu Deine Schriftart, die Du verwenden möchtest, unter diesem Link hoch. Hier kannst Du, falls notwendig, auch eine extra Schriftart für fett-, bzw. kursiv gedruckte Texte verwenden. Die nach dem Klick auf den “Let’s do this!”-Button erhaltene Datei speichert Ihr auch im Javascript-Verzeichnis, in dem Ihr die Cufon-YUI-Datei gespeichert habt.
Schritt 3: Jetzt geht’s ans Eingemachte ;) Öffnet Eure Header-Datei Eurer Website und setzt den Cursor in den <head>-Bereich. Fügt nun folgenden Code ein:
<script src="cufon-yui.js" type="text/javascript"></script> <script src="Vegur_300.font.js" type="text/javascript"></script> <script type="text/javascript"> Cufon.replace('h1'); </script>
Den Pfad ändert Ihr natürlich noch auf den, Eurer Seite. Und den Namen der ~~~.font.js-Datei ändert Ihr auch auf Euren Font-Namen. Die nächste Zeile “Cufon.replace(‘h1′)”: hier legt Ihr fest, welche HTML-Tags in die Schrift umgewandelt werden. Dies könnt Ihr je nach Belieben verändern. Dann noch alles hochladen und fertig.
Wenn Ihr alles richtig gemacht habt, sehr Ihr nun den von Euch festgelegten Text in einer anderen Schriftart. Bei mir ist es übrigens die Überschrift ;) In diesem Tutorial habe ich alles auf einfacher Art und Weise dargestellt, da es sonst zu kompliziert wirken würde. Genauer nachlesen könnt Ihr das ganze auf der Cufon-Homepage.
So kann man auch sein eigenes Schriftbild auf seinem Blog oder seiner Webseite einbinden: “eigene Schriftart am Computer erstellen“.
Artikel verfasst am 01. 10 2009 um 7:35 von Denis L.
Kommentare (1)