Eigene Schriftarten verwenden

Möchtest du, dass das Schriftbild deiner Website überall gleich aussieht, bist du normalerweise auf Standard-Schriftarten angewiesen. Also beispielsweise Arial oder Times New Roman. Machst du das nicht, kannst du dir nicht sicher sein, dass der Webseiten-Besucher die gewählte Schriftart installiert hat. Falls nein, würde deine Webseite völlig anders aussehen. Besser würde es sich natürlich machen, wenn du eine eigene Schriftarten verwenden könntest.

In diesem Artikel erläutere ich, wie du trotzdem eigene Schriftarten verwenden kannst und die Besucher deiner Seite sie sehen können.

 

Eigene Schriftarten im Web mit CSS

Mit CSS 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 musst du dazu die Schriftart im Stylesheet definieren.

 

Code-Beispiel:

@font-face {
 font-family: Beispiel-Schriftart;
 src: url(‘beispiel-schriftart.otf‘);
 }
 
 h1 {
 font-family: Beispiel-Schriftart, Arial;
 }

 

Erläuterung:

Ruft man jetzt deine Seite mit einem Browser auf, der den CSS3-Standard @font-face unterstützt, zeigt er die entsprechende Schriftart an. Der Browser lädt die Schriftart für die Anzeige vom Server und verwendet diese. Ruft ein Nutzer mit einem sehr alten Browser deine Seite auf, verwendet dieser die zweite Schriftart (in obigem Beispiel Arial). Die @font-face Angabe ignoriert der Browser dann.

 

Verwendung von Grafiken

Man kann auch Grafiken mit der eigenen Schriftart erstellen und diese anstelle eines Textes in die Website setzen. Browser zeigen Grafiken in diesem Fall auch korrekt an. Jedoch hat diese Methode auch große Nachteile:

Zum einen können Suchmaschinen den Text, der sich in der Grafik verbirgt, natürlich nicht erfassen. Aus SEO-Sicht ist dies ein absolutes K.O.-Kriterium. Andererseits ist es auch so, dass durch die Verwendung von Grafiken die Größe deiner Webseite rapide ansteigt. Auch in Zeiten von DSL hat noch nicht jeder einen schnellen Zugang. Insbesondere die Mobil-User verfügen oftmals nur über eine begrenzte Bandbreite. Unter Umständen kann so das Laden deiner Website sehr lange dauern. Manche Nutzer könnten diesen Ladevorgang dann abbrechen und die Seite wieder verlassen.

Daher rate ich von dieser Methode ganz entschieden ab.

 

Einsatz von Flash

Mit Flash ist es ebenfalls möglich, eigene Schriftarten in die Webseite einzubinden. Jedoch rate ich auch von dieser Methode ab. Zum einen hat nicht jeder Nutzer ein Flash-Plugin installiert, zum anderen erhöhen sich die Ladezeiten erheblich. Weiterhin stellen nach und nach die Browser-Hersteller den Support von Flash ein. So kann man entsprechende Objekte gar nicht mehr nutzen.

Auf mobilen Endgeräten kann man in der Regel Flash ebenfalls nicht nutzen. Die bekannten Probleme mit der Erfassung der Inhalte durch Suchmaschinen treten darüber hinaus auch hier auf.

Daher auch hier: Von einem Einsatz dieser Methode rate ich ganz klar ab.

 

Eigene Schriftarten mit JavaScript

Eine letzte Möglichkeit, eigene Schriftarten auf der Website anzuzeigen, wäre mit JavaScript. Mit einem <canvas>-Objekt kannst du dabei die Schrift in die Website einbinden und den Text entsprechend in dieser Schriftart anzeigen. Der Text selbst wird dabei semantisch korrekt in die eigene Website eingebunden. So können auch Suchmaschinen diesen erfassen und indexieren.

Wie du eigene Schriften per JavaScript in deine Webseite einbinden kannst, erfährst du entweder auf typeface.js oder auf cufón. Dort kannst du dir auch die benötigten JavaScripts einfach online erstellen.

Ganzheitlich betrachtet rate ich auch von dieser Variante ab. Einige Nutzer haben JavaScript im Browser deaktiviert und haben daher nichts davon. Die sicherste Variante, in jeglicher Hinsicht, ist die am Anfang vorgestellte CSS-Variante.

 

Ein warnendes Wort zum Schluss

Du musst immer darauf achten, dass du nur entsprechend freie Schriften in die Website einbindest. Viele Hersteller von Schriftarten verbieten in den Lizenzbestimmungen die Verbreitung oder Einbindung der Schriftarten in Dokumenten. Dazu zählen auch Webseiten. Verwende daher nur Schriften, bei denen die Verbreitung und Einbindung in Dokumente auch erlaubt ist, um möglichen Ärger zu vermeiden.

PS: Im Artikel „Schriftarten im Web: Diese kannst du verwenden“ findest du weitere Informationen zu den verwendbaren Standard-Schriftarten.

 


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.