|
Eigene Schriftarten verwenden |
 |
 |
|
Tipps und Tricks -
Webdesign-Tipps
|
In der Regel haben Sie nur die Möglichkeit, bestimmte Standard-Schriftarten auf Ihrer Web-Präsenz zu verwenden. Diese Standard-Schriftarten sind dabei z.B. Arial oder Times New Roman, die auf so gut wie jedem Rechner installiert sind. Tun Sie dies nicht, kommt nicht jeder Besucher Ihrer Webseite in den Genuss, die gewählte Schriftart anzusehen, da diese unter Umständen nicht auf dem Rechner installiert ist.
Lesen Sie in diesem Artikel, wie Sie trotzdem eigene Schriftarten in Ihrer Web-Präsenz verwenden können, und diese auch bei den Besuchern Ihrer Seite angezeigt werden.
Eigene Schriftarten im Web mit CSS3
Mit CSS3 ist es möglich, eigene Schriftarten auf der Web-Präsenz zu verwenden. Dazu muss die verwendete Schriftart auf dem Server zum Download zur Verfügung stehen. Zuerst muss dazu die Schriftart im Stylesheet definiert werden.
Beispiel:
@font-face {
font-family: Beispiel-Schriftart;
src: url(‘beispiel-schriftart.otf‘);
}
h1 {
font-family: Beispiel-Schriftart, Arial;
}
Erläuterung:
Wird Ihre Seite nun mit einem Browser aufgerufen, der den CSS3-Standard @font-face unterstützt, wird die entsprechende Schriftart für die Anzeige vom Server geladen und verwendet. Wird Ihre Seite hingegen mit einem älteren Browser betrachtet, der diesen Standard nicht unterstützt, wird die zweite Schriftart verwendet (in diesem Beispiel Arial) und die @font-face-Angabe ignoriert.
Bitte beachten Sie, dass momentan noch die wenigsten Browser diesen Standard unterstützen.
Verwendung von Grafiken
Eine weitere Möglichkeit ist es, Grafiken mit der eigenen Schriftart zu erstellen und diese in die Webseite einzubinden, anstatt eines Textes. Diese wird dann auch in jedem Browser korrekt angezeigt. Jedoch hat diese Methode auch große Nachteile:
Zum einen kann der Text, der sich in der Grafik verbirgt, natürlich nicht von den Suchmaschinen erfasst werden. Aus SEO-Sicht ist dies natürlich ein absolutes Killer-Kriterium. Andererseits ist es auch so, dass durch die Verwendung von Grafiken die Größe Ihrer Webseite rapide ansteigt. Auch in Zeiten von Hochgeschwindigkeits-DSL hat noch nicht jeder einen DSL-Zugang. Unter Umständen kann so das Laden Ihrer Web-Seite sehr lange dauern. Manche User könnten diesen Ladevorgang dann abbrechen und Ihre Seite wieder verlassen.
Einsatz von Flash
Mit Flash ist es ebenfalls möglich, eigene Schriftarten in die Webseite einzubinden. Jedoch raten wir auch von dieser Methode ab. Zum einen hat nicht jeder User Flash in seinem Browser aktiviert (da damit auch viel Schindluder betrieben werden kann wie nervige Sounds, etc.), zum anderen können die Ladezeiten hier auch rapide in die Höhe schnellen. Die bekannten Probleme mit der Erfassung der Inhalte durch Suchmaschinen treten auch hier auf.
Eigene Schriftarten mit JavaScript
Eine letzte Möglichkeit, eigene Schriftarten auf der Webseite anzuzeigen, wäre mit JavaScript. Durch ein <canvas>-Objekt wird dabei die Schriftart in die Webseite eingebunden und der Text entsprechend in dieser Schriftart angezeigt. Der Text selbst wird dabei semantisch korrekt in die eigene Webseite eingebunden. So können auch Suchmaschinen diesen erfassen und entsprechend indexieren. Darüber hinaus haben die meisten User JavaScript in Ihrem Browser aktiviert.
Wie Sie eigene Schriftarten per JavaScript in Ihre Web-Seite einbinden können, erfahren Sie entweder auf typeface.js oder auf cufón. Dort können Sie sich auch die benötigten JavaScripts einfach online erstellen.
Ein warnendes Wort zum Schluss
Bitte beachten Sie, nur entsprechend freie Schriftarten in Ihre Webseite einzubinden. Viele Hersteller von Schriftarten verbieten in ihren Lizenzbestimmungen die Verbreitung oder Einbindung ihrer Schriftarten in Dokumenten, worunter natürlich auch Web-Seiten zählen. Suchen und verwenden Sie also nur freie Schriftarten, bei denen die Verbreitung und Einbindung der Schriftarten auch erlaubt ist, um möglichen Ärger zu vermeiden.
|