Quick Tip of the Week - Wie ersetze ich meine Schriftart mit Cufon?
In diesem Artikel habe ich bereits einige gute Schriftarten für Cufon vorgestellt. Diesmal möchte ich euch in meinem Quick Tip of the Week demonstrieren, wie Cufon funktioniert. Wie ersetze ich also meine normale Schrift im Quelltext mit einer Schriftart, die nicht jeder auf seinen PC hat?
In diesem Video nutze ich die Schriftart Nillan, natürlich könnt Ihr jede belibige Schrifart nutzen. Achtet aber darauf, dass Ihr diese auch nutzen dürft!
Nützliche Links
Video
Downloaded Cufon
Besorgt euch zunächst die Javascript Datei von Cufon. Diese könnt Ihr hier kostenlos runterladen. Diese Javascript Datei müsst Ihr in euren <head> Bereich des Dokumentes einbinden.
Ich habe diese Datei direkt von Cufon eingebunden.
Generiert eure Cufon Schriftart
Nun müsst Ihr eure Cufon Schriftart noch generieren lassen. Geht dazu auf http://cufon.shoqolate.com/generate/ und wählt unter “Regular typeface” eure Schriftart aus. Bestätigt dann einmal die EULA sowie die Nutzungsbedingungen am Schluss und klickt auf “Lets do this”. Die erstellte Datei speichert Ihr in euer Verzeichniss und bindet auch diese Javascript Datei in euren <head> Bereich ein.
Ich habe die Schriftart Nissan genommen, meine Datei hieß also “Nilland_400.font”
Elemente mit Cufon ersetzen
Wir möchten nun z.B alle h2 Elemente mit unserer Cufon Schriftart ersetzen. Dazu schreiben wir einfach folgenden kleinen Javascript Code in unseren < head > Bereich.
Fertig!
Möchtet Ihr nun ein bestimmtes Element ansprechen, müsst Ihr ganz einfach nur ein wenig CSS anwenden. Wir möchten nun z.B eine Liste mit der ID Cufon mit unserer Cufon Schriftart ersetzen.
Internet Explorer Fix
Wie immer hat der Internet Explorer einen kleinen Bug. So sieht man eine kleine Verzögerung bei der Ersetzung der Schriftart. Diesen Fehler können wir mit einem kurzen Javascript Code beheben. Schreibt diesen einfach in euren head Bereich.
Kristoffer Kaes (1 comments)
Hey, wie immer ein klasse Tipp, den ich noch nicht kannte!
Wann kommt der Teil 5 der Joomla Screencast Serie?
Ich kann es kaum noch erwarten!
Kristoffer
jacob (1 comments)
hey das hört sich sehr gut an. Werd das mal testen. du hast deine Überschriften wahrscheinlich auch mit dieser Technik ersetzt oder? Ist dir mal aufgefallen, dass die Umlaute fehlen. Liegt das daran das die in der Schrift fehlen.
Gruß J
p.s. lese grade du kommst aus wuppertal…. freue mich mal einen guten blog aus wuppertal zu lesen und grüße aus eben diesem wuppertal
Hunnia (1 comments)
Servus!
Ich möchte auf diese Weise Runenschrift einsetzen, deren Schreibweise von rechts nach links ist. Hast du evtl. auch hierbei Erfahrungen?
Es ist ziemlich schwierig neue Runen-Fonts in Joomlaeditoren (zB. JCKEditor) hinzuzufügen, geschweige denn die Schreibrichtung zu aendern.
Ausser Cufon gibts noch den SIFRGenerator, bei dem ich schon beim Erstellen Fehler bekomme, bei dem mir der Programmierer nicht helfen konnte.
Christopher Dosin (83 comments)
Da kann ich dir leider nicht weiterhelfen, mit Schriften von Rechts nach Links habe ich leider keine Erfahrung. Am besten einfach mal ausprobieren
Pierre (1 comments)
Vielen Dank für diese Anleitung, welche ich bereits erfolgreich umsetzen konnte. Genau wonach ich gesucht habe. Merci
flo (2 comments)
Wow! Danke für den Tipp!
Grüße aus Elberfeld!
Florian
Entry (1 comments)
Sehr gut erklärt, danke.
Wolfgang (1 comments)
Mein Problem ist gerade, dass meine Cufonschrift keine Umlaute anzeigt, obwohl sie entsprechend generiert wurde. Ursprung ist ein Template Monster Template gewesen.
Jan (2 comments)
Bezüglich der fehlenden Umlaute würde ich die Generierung der Schriftdatei noch einmal neu machen, ich hatte damit auch zunächst Probleme.
http://blog-das-oertchen.de/blog/2011/06/30/webentwicklung-deutsche-umlaute-und-cufon
Wichtig ist natürlich, daß die Schrift im Original tatsächlich Umlaute unterstützt.