Webfonts – mehr Gestaltungsfreiheit für Websites

Das Internet besteht aus Informationen. Informationen in Form von Bildern, Grafiken, Videos und manchmal auch Ton.

Aber der allergrößte Teil dieser Informationen liegt in Buchstaben und Zahlen vor, also Inhalte in Textform.

Bekanntermaßen ist Content King, und Content ist Text. Nur Texte lassen sich von den Suchmaschinen einwandfrei spidern, nur Texte können für sehbehinderte Menschen in Sprache umgesetzt werden.

Leider sind aber die Gestaltungsmöglichkeiten was die Typografie auf Webseiten angeht im Gegensatz zu den Printmedien sehr eingeschränkt.

Die klassische Angabe für die Verwendung der Fonts, der sogenannte „Font-Stack“, lautet im CSS oft: Arial, Verdana, sans-serif.

Natürlich kann im Font Stack die gewünschte Schriftart einfach angegeben werden. Die Besucher, die diesen Font auf ihrer Festplatte haben, sehen die Website dann tatsächlich so, wie sie sie sehen sollen, der Rest aber leider nicht.

Je nach Verbreitung eines Fonts kann es gut sein, dass nur sehr wenigen Besuchern das bevorzugte Schriftlayout präsentiert werden kann.

Die neun websicheren Schriftfamilien, die auf Windows und Mac OS X-Systemen standardmäßig installiert sind, lauten Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS und Verdana.

Die typografische Gestaltung einer Website wird also dadurch begrenzt, dass Schriften, die man verwenden möchte, bereits auf dem Gerät des Lesers vorhanden sein müssen, bzw. der Leser müsste dazu bereit sein, extra für die betreffende Website die fehlende Schriftart zu installieren.

Dieses kollidiert aber wieder mit der Benutzerfreundlichkeit und die Aufforderung etwas zu installieren verschreckt nur den User. Auch den Text in der gewünschten Schriftart einfach als Bild online zu stellen ist keine Alternative, nicht nur weil eine Bilddatei viel größer ist, sondern weil die Texte dann nicht mehr suchmaschinenfreundlich und barrierefrei sind.

Webfonts in die eigene Website einbinden

Um dennoch mehr Gestaltungsfreiheit zu erhalten, bietet sich die Nutzung von Webfonts an. Die Fonts, die Ihr auf eurer Website nutzen wollt, werden auf dem Server abgelegt und mittels der CSS – Syntax @font-face und Angabe der URL, unter der der Font zu finden ist, werden anschließend die Texte auf der Website in der betreffenden Schriftart dargestellt.

Das sieht dann zum Beispiel wie folgt aus:

@font-face {

font-family: „Fontname“;

src: url („/fonts/fontname.otf“)  format („opentype“);

}

Ihr müsst die Schriftart natürlich auch in eurem Font-Stack an erster Stelle auflisten.

Es gibt nur leider zwei kleine Haken an der Sache. Zum einen könnt Ihr nicht einfach eine beliebige Schriftart auf euren Server packen und diese über eure Website weiter verbreiten, denn es müssen in der Regel Lizenzrechte beachtet werden. Das bedeutet, Ihr müsst für viele Fonts Lizenzen erwerben.

Oder Ihr umgeht das, indem Ihr euch gleich eine freie Schriftart sucht und verwendet.

Meine bevorzugte Quelle für freie Fonts ist FontSquirrel, wo ihr neben zahlreichen freien Schriftarten auch @font-face Font Kits downloaden könnt.

Ein weiteres Highlight ist dort der @font-face Kit Generator, mit dem Ihr Kits mit euren eigenen Schriften erstellen könnt.

Nun zum anderen Haken. Leider gibt es Unterschiede in der Unterstützung der verschiedenen Schriftdateiformate.

Manche Browser unterstützen das TTF- und das OTF-Format und die meisten Browser können in den neuesten Versionen mit dem Open-Source-Format WOFF umgehender, nur der Internet Explorer besteht auf das EOT-Format von Microsoft.

Das bedeutet, Ihr müsst nicht nur auf eventuelle Lizenzen achten, sondern auch die betreffende Schriftart in den verschiedenen Dateiformaten den Browsern eurer Besucher zur Verfügung stellen. Die Browser suchen sich dann das für sie passende Format heraus.

Soweit, so gut. Nur der Internet Explorer unter der Version 9 tanzt aus der Reihe. Diese älteren Versionen haben alle einen Bug der einen 404 Fehler bei Verwendung des @font-face Codes hervorruft. Wie Ihr diesen Bug ganz einfach umgeht wird hier auf bloggerschmidt.de beschrieben.

Dort befindet sich auch ein Link zu einer bloggerschmidt-Demoseite, wo Ihr live ersehen könnt, ob der Code in eurem Browser funktioniert und ob euch die verschiedenen Fonts sauber angezeigt werden.

Webfont-Dienstleister

Eine komfortablere Möglichkeit, als sich selbst mit den verschiedenen Dateiformaten der Fonts herumzuschlagen, ist es auf einen Dienst zurückzugreifen. Diese Dienstleister hosten Schriften und halten sie fortwährend auf dem neuesten Stand.

Ihr müsst bei allen Dienstleistern einfach nur eine Schriftart auswählen, den passenden Code dazu herunterzuladen, diesen auf eurer Website einbinden und schon wird der Text in der betreffenden Schrift angezeigt.

Ein kostenloser Dienst, der momentan ausschließlich Schriften unter der Creative-Common-Lizenz anbietet, ist Google Font Directory.

Mehr Auswahl an Web-Schriften gibt es meist bei Dienstleistern, die für ihren Service Gebühren erheben. Diese haben oft umfangreiche, aber nicht kostenlose Bibliotheken.

Die Gebühren werden in der Regel von Dienst zu Dienst unterschiedlich berechnet, bei den einen sind sie monatlich fällig, bei anderen jährlich und bei manchen richtet sich die Höhe der Gebühr nach den Seitenaufrufen. Diese Webfont-Dienstleister sind im Web zahlreich zu finden

Fazit:

Die Möglichkeit der Gestaltung von Websites mit @font-face wird zunehmend bekannter und gewinnt immer mehr an Boden. Die Menge der Dienstleister für Web-Schriftarten nimmt beständig zu und die Auswahl an Fonts erhöht sich von Woche zu Woche. Der Einsatz von Web-Schriften wird in Zukunft nicht mehr wegzudenken sein.

About The Author

Diana Ludwig

Webdesignerin, Pinselschwingerin, Bloggerin und Studentin der Medieninformatik. Mein Steckenpferd ist das freie Open Source 3D Programm Blender, über das ich auf Blender-Tutorial schreibe. Du findest mich auch auf Google+ oder abonniere unseren RSS-Feed.

1 Comment