TrueType Schriften auf Webseite anzeigen

Hey, schön Dich zu sehen. Folgende Seite wird Dir empfohlen (Anzeige):

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“.

Auch interessant:

Be Sociable, Share!

Sponsored Links:

Veröffentlicht unter Webentwicklung
0 Kommentare auf “TrueType Schriften auf Webseite anzeigen
1 Pings/Trackbacks für "TrueType Schriften auf Webseite anzeigen"
  1. [...] Schriften (TT-Fonts) in Website verwenden – Tipp von Payamo [...]

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

*

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Letzte Artikel
Samsung-Releases-Super-Powerful-Samsung-Galaxy-S5-Soon

Zubehör für Samsung Galaxy S5

Das Samsung Galaxy S5 steht in den Startlöchern, befindet sich wahrscheinlich auch schon auf dem Weg zu den großen Händlern wie Amazon und Co. Wenn man sich ein hochwertiges Smartphone kauft wie das Galaxy S5, möchte man es natürlich auch

apple-iphone-kommend

Smartphone Ausblick: Womit das neue iPhone punkten könnte

(Gastbeitrag) Während schon bald einige Android-Flaggschiffe in einen interessanten Wettbewerb am Smartphone-Markt treten werden, müssen sich Apple-Fans noch gedulden. Dennoch steht die Berichterstattung um das mögliche neue iPhone nicht still. Ganz im Gegenteil: Im Internet kursieren bereits die ersten Informationen

pizza-bestellen

Pizza-Portale rentabel für kleine Pizza-Lieferdienste?

Pizza-Portale kennt so gut wie jeder. Gemeint sind Pizza.de, Lieferheld, Lieferando und Co. Diese drei sind die Platzhirsche am deutschen Markt. Früher fragte ich mich, warum denn nicht alle Pizza-Lieferdienste der Stadt diesen Service nutzen. Doch nach kurzer Recherche wurde

Hannspree-HL272HPB_LG-W2242T

Mein neuer PC – since 2014

Mein nun schon fast 6 Jahre alter Rechner musste erneuert werden. Damals noch mit Startschwierigkeiten (siehe Artikel Audio Device on High Definition Audio Bus), ging mit meinem neuen Rechner alles reibungslos. Jedenfalls nachdem ich alle Teile eingebaut hatte. In diesem Artikel

z2

Sony Xperia Z2: Schutzfolien

Der Erfolg von Schutzfolien ist unüberschaubar. Überall gibt es sie. Doch viele sind teuer und nicht besser als günstige. Bei den günstigen Schutzfolien gibt es solche und solche. Ich habe viele Hersteller ausprobiert und bin bisher immer an mumbi-Schutzfolien hängengeblieben.

Kategorien