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
cyber_ssl

Statistiken zum E-Commerce in Deutschland

Der E-Commerce in Deutschland erfreut sich immer größerer Beliebtheit. Neben den großen Händlern wie Amazon gibt es aber auch andere Händler, die Ihr Geschäft über das Internet abwickeln und ihre Produkte den Konsumenten anbieten. Einige seriöser, die anderen weniger seriös.

iPhone-6_6Plus_5S_5C

Lohnt sich der Umstieg vom iPhone 5S auf das iPhone 6?

Ja, das iPhone 6 und das iPhone 6 Plus ist nun schon eine ganze Weile auf dem Markt. Viele haben noch ein iPhone 5S oder iPhone 5. Die Vertragsverlängerung steht an oder man überlegt, sich das iPhone zum Vollpreis zu

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,

Kategorien