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.
Anderer Ansatz, leider wenig kompartibel :
@font-face {
font-family: MyriadPro; /* no quotes! */
src: url('fonts/myriadpro-regular-webfont.eot');
src: local('?'), url('fonts/myriadpro-regular-webfont.woff') format('woff'), url('fonts/myriadpro-regular-webfont.ttf') format('truetype'), url('fonts/myriadpro-regular-webfont.svg#webfontFQGeCYfO') format('svg');
font-weight: normal; font-style: normal;
}
Weiterführende Links:
http://typeface.neocracy.org/fonts.html
http://blog.netthinks.com/cufon-schrifteinbindung-fuer-alle-browser/
