Bessere Darstellung von Webfonts in Chrome und Opera

Webschriften sind vielen Entwicklern ein Dorn im Auge. Einerseits unterscheidet sich die Darstellung in verschiedenen Browsern teilweise sehr stark. Auf der anderen Seite verbrauchen sie mehr Ressourcen als Standardschriften. In Google Chrome und Opera existiert allerdings ein nerviger Fehler. Schriften werden zumeist unscharf dargestellt. Bei der Fehlersuche stößt man auf die verschiedensten Ansätze. Oftmals verweisen Webdesigner auf die ClearType-Funktion unter Windows oder verwenden zusätzliche CSS-Eigenschaften. Nur selten funktioniert einer dieser Vorschläge wirklich. Ich habe mich ebenfalls eine Weile mit diesem lästigen Bug auseinandergesetzt. Die Lösung des Problems ist am Ende denkbar simpel. Nichtsdestotrotz sollte der Einsatz von Webfonts gut überlegt sein, denn dieses Thema birgt viele Schwierigkeiten.

Wie binde ich Webschriften via CSS korrekt ein?

Das Internet ist voll mit schönen Schriftarten. Beispielsweise bietet Google Fonts eine große Auswahl und leichte Integration. Allerdings begibt man sich damit völlig in die Abhängigkeit des Suchmaschinenriesen. Daher wäre es klüger, die Schriften auf dem eigenen Webspace zu lagern. Die Einbindung erfolgt am besten via CSS3 über die Font-Face Regel. Doch vorsicht, hier lauert ein relevanter Fallstrick. Zunächst spielt es eine bedeutende Rolle, welche Schriftformate zum Einsatz kommen. Welches Format für welchen Browser? WOFF sollte irgendwann mal der genutzte Standard sein, aber das dauert wohl noch. Der Internet Explorer versteht beispielsweise EOT. Safari, Android und iOS kommen prima mit TTF zurecht und Chrome sowie Opera eigentlich mit SVG. Welches Format nimmt man? Antwort: Alle vier bzw. fünf. Der Internet Explorer 9 spielt gerne den Sonderling. Bei der Reihenfolge gilt besonders viel Aufmerksamkeit. Haltet euch einfach an das nachfolgende Code-Beispiel.

@font-face {
  font-family: 'font';
  src: url('font.eot'); /* IE9 Kompatibilitätsmodus */
  src: url('font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  	   url('font.svg#svgfont') format('svg'), /* Chrome, Opera */
       url('font.woff') format('woff'), /* Moderne Browser */
       url('font.ttf') format('truetype'); /* Safari, Android, iOS */
  font-weight: normal;
  font-style: normal;;}
@media screen and (-webkit-min-device-pixel-ratio:0) {
html {-webkit-font-smoothing: antialiased;}}

Augenscheinlich versucht der Chrome Browser die Schrift als WOFF-Format zu ziehen, versteht diese scheinbar jedoch nicht besonders. Glücklicherweise wird eine CSS-Datei immer von oben nach unten und zeilenweise abgearbeitet. Daher hilft der primitive Trick, den Aufruf für die SVG-Font davor zustellen. Dadurch versucht Chrome zunächst dieses Format zu laden und erst anschließend die nachfolgenden. Es hängt auch stark von der Font ab, ob WOFF hierfür eine gute Wahl darstellt. Da Opera im vergangenen Jahr auf Googles Webkit-Engine umgestiegen ist, erwartet einen dort dasselbe Schicksal. Diese kleine Änderung der Reihenfolge bringt eine deutliche Verbesserung mit sich. Zusätzlich sorgt das Attribut antialiased für eine angenehmere Schriftdarstellung. Wer es gerne etwas schärfer möchte, setzt stattdessen subpixel-antialiased ein.

Kleiner Tipp noch am Rande: Wirkt eine Schrift innerhalb des Browsers trotzdem unscharf, schaut nach, ob die Schrift in den Systemschriften installiert ist. Meist reicht das Löschen schon aus.


Avatar von reraiseace
Autor: Markus Werner (reraiseace) Twitterreraiseace, Google+reraiseace, Twittercb_werner
Ich bin Redaktionsvolontär bei der COMPUTER BILD in Hamburg, Fernstudent am Deutschen Journalistenkolleg und schreibe auf re{raise}ace privat über Webdesign und Programmierung. Seit 2015 schrieb ich auch regelmäßig für andere Medien.

0 Kommentare

Du kannst diesen Artikel nicht mehr kommentieren.