TrueType Schriften auf Webseite anzeigen

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!
Guck Dich doch etwas um, hier die Vor-Zurück-Navigation:
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
iPhone-Cover

So gestaltest Du ein Smartphone-Cover selbst

Fast jeder besitzt heute ein Smartphone. Laut einer Statistik von Statista gab es im Feburar 2014 40,4 Millionen Smartphone-Nutzer in Deutschland. Knapp 81 Millionen Einwohner hat Deutschland. Viele von ihnen haben ihr Smartphone geschützt. Viele mögen eine Klapptasche (Flipcover), manche

649839_42986082

Webhosting – Worauf kommt es an?

Mittlerweile gibt es sehr, sehr viele Webhosting-Anbieter. Manche sind kostenlos, manche kosten fast nichts, manche wenig und manche viel. Worauf es ankommt und wovon man die Finger lassen sollte, zeige ich Euch in diesem Artikel. Kostenlos vs. Kostenpflichtig Grundsätzlich könnte

5ss5

Samsung Galaxy S5 und iPhone 5S – Welches ist besser?

Viele Leute fragen sich immer, welches Handy denn besser ist. Das Samsung Galaxy S5 oder das iPhone 5S. Klar, das Samsung Galaxy ist gerade frisch auf dem Markt, daher sind die Leistungsunterschiede auf dem Papier entschieden. Auch bei dem Vorgänger,

1432700_50716321

Wie Apps bei der Hochzeit helfen – 3 Tipps

Wer seine Hochzeit plant, muss vieles beachten. Sehr vieles. Um bei den Gästen und beim Ehemann/Ehefrau Eindruck zu schinden, sind Abendkleider lang nicht mehr das Maß der Dinge. Die perfekte Organisation spielt da fast eine größere Rolle. Heutzutage gibt es

Fritzbox-einloggen

FritzOS / Fritzbox 7490: Automatische Updates deaktivieren

AVM, der Hersteller der Fritzbox, hat dem Topmodell, der Fritzbox 7490 ein neues Update gegönnt. Aktuell noch eine Laborversion, also nicht zur produktiven Verwendung freigegeben, aktualisiert sich die Fritzbox künftig von allein. Anders als bei normalen Updates ist diese Funktion

Kategorien