Tipp: Jede beliebige Schrift in eine Webseite einbinden
Webdesign bietet heute unendlich viele Möglichkeiten ein Unternehmen oder eine Person zu präsentieren. Eine große Barriere bleibt allerdings immer die Wahl der Schriftart. Schriften werden meistens durch ein Stylesheet aufgerufen und der Besucher der Homepage sollte diese dann auch tatsächlich auf seinem Rechner installiert haben. Ist dies nicht der Fall, dann wird ein alternativ angegebener Font geladen und die Webseite damit dargestellt.
Beim heutigen Webdesign wird allerdings immer mehr Wert auf Individualität gelegt. Firmen möchten gerne ihre Schriften die in ihrer Corporate Identity festgelegt sind ebenso online darstellen. Blogger würden gerne ausgefallene Fonts benutzen um sich von anderen Blogs abheben zu können. Also greift man meistens auf altbewährte Mittel zurück und vektorisiert die Fonts zusammen mit einem Hintergrund als Bild.
Genau dieses Problem hat der Entwickler von Typeface.js erkannt und sorgt damit für völlig neue Gestaltungsmöglichkeiten im Webdesign. Mit Typeface.js kann jede beliebige Schriftart in eine Webseite eingebunden werden und dabei spielt es überhaupt keine Rolle mehr ob der Besucher diese Schrift auf seinem Rechner zu Hause installiert hat.
So funktioniert Typeface.js:
Die Schrift(en) konvertieren die man einbinden möchte. Dazu besucht man den Font Converter, lädt seine Wunschschriften hoch und speichert die neuen Fonts auf der Festplatte.
Nun lädt man die Typface.js Library runter und lädt sie in das entsprechende Homepage Verzeichnis. Jetzt braucht man den konvertierten Font und die Typeface.js nur noch in seiner Homepage aufzurufen und die gewünschte Schrift wird dargestellt. Hier der Beispielcode dafür:
<html>
<head>
<!– load any external stylesheets first –><link rel=”stylesheet” type=”text/css” ref=”/style.css”>
<!– then load the typeface.js library and typeface.js fonts –><script type=”text/javascript” src=”typeface-0.10.js”></script>
<script type=”text/javascript” src=”helvetiker_regular.typeface.js”></script>
</head><body>
<!– go ahead and specify typeface.js fonts with CSS –><div class=”myclass typeface-js” style=”font-family: Helvetiker”>
Text here in Helvetiker font…
</div>
</body>
</html>
Einen kleinen Haken habe ich aber dennoch entdecken können. Macintosh User können die Schriften online auf der Homepage des Autors leider nicht konvertieren. Das Konvertieren funktioniert momentan nicht unter MAC OSX, allerdings sehr gut unter Windows XP. Die Schriften die ich konvertiert habe werden sehr schön dargestellt, ich habe das natürlich mit einem Grunge Font getestet.
Nun wünsche ich viel Spaß und viel Erfolg beim Testen. Vielleicht berichtet hier ja mal einer von seinen ersten Erfolgserlebnissen?
Rock on…
Tags: Blog, css, darstellen, einbinden, fonts, Javascript, konvertieren, schriftart, stylesheet, webseite
Bring on the comments
Leave a Reply
Additional comments powered by BackType
Das hört sich ja gar nicht so schlecht an. Ich kannte bisher nur SIFR, was im Zusammenspiel mit einem Flash-Film sehr gut funktioniert (ganz perfekt natürlich auch nicht).
Weitere Infos findet man aber auch in diesem 3 Jahre alten Artikel:
http://www.drweb.de/magazin/sifr-neue-schriftenvielfalt/
Auf der Seite von SIFR habe ich auch den Hinweis für dieses Script gefunden.
Funktioniert echt super! Danke
[...] Jede beliebe Schrift in eine Webseite einbauen Bookmarken bei Diese Icons verlinken auf Bookmark Dienste bei denen Nutzer neue Inhalte finden und mit anderen teilen können. [...]
Hallo,
also bei mir funktioniert es garnicht.
Ich habe die Dateien helvetiker_regular.typeface.js und typeface-0.11.js ist gleiche Verzeichnis, den obigen Code in die Website einfügt und … nichts passiert.
Ich hatte bisher nur sifr3 getestet. Als etwas heikel finde ich bei Typface.js die Sache in Bezug auf die Lizenzen der jeweiligen Schriften, da die Schriften auf dem Webserver liegen.
Ich werde es dennoch mal testen.