Okt
28
2008

Tipp: Jede beliebige Schrift in eine Webseite einbinden

No Gravatar

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…

Tipp: Jede beliebige Schrift in eine Webseite einbinden


Dienstag, Oktober 28th, 2008, 15:37