Eine Webseite lädt, der Text erscheint, alles wirkt fertig. Dann hakt die Verbindung, eine einzige Schriftdatei kommt nicht an, und plötzlich starrst Du auf eine leere Fläche, wo eben noch Worte standen. Genau hier kippt eine Gestaltungsfrage in eine Barriere.
Webfonts und Icon-Fonts gehören zum Standard moderner Seiten. Sie liefern die passende Schrift und kleine Symbole für Menü, Suche oder Warenkorb. Solange alles glattläuft, merkst Du nichts davon. Erst wenn etwas schiefgeht oder eine Hilfssoftware zuhört, zeigt sich, ob das Fundament trägt.
Du brauchst dafür kein neues Design und keine Zeile Code. Du musst nur verstehen, woran es hakt, und das Richtige einfordern.
Was Webfonts und Icon-Fonts überhaupt sind
Ein Webfont ist eine Schriftart, die Deine Seite vom Server nachlädt, damit überall dieselbe Schrift erscheint. Ohne sie würde der Browser auf eine Standardschrift des Geräts zurückfallen, und Dein sorgsam gewählter Auftritt sähe auf jedem Rechner anders aus.
Ein Icon-Font ist dieselbe Technik, nur mit Symbolen statt Buchstaben. Hinter jedem kleinen Bildchen für Lupe, Briefumschlag oder Warenkorb steckt in Wahrheit ein Zeichen aus einer Schriftdatei. Das spart Ladezeit und lässt sich bequem einfärben.
Beides ist nützlich und weit verbreitet. Die Technik selbst macht keine Mühe. Schwierig wird es an zwei Stellen, an denen sie ohne Sicherheitsnetz eingebaut wird.
Wenn der Text beim Ladefehler verschwindet
Der Browser muss den Webfont erst herunterladen, bevor er den Text damit zeichnen kann. In dieser Wartezeit hat er die Wahl: Er zeigt den Text sofort in einer Ersatzschrift, oder er hält ihn zurück, bis die richtige Schrift da ist.
Hält er ihn zurück und die Datei kommt langsam oder gar nicht, sieht Dein Besucher für Sekunden nichts. Bei einer wackeligen Mobilverbindung wird aus Sekunden eine gefühlte Ewigkeit, und manch einer ist längst weg, bevor das erste Wort erscheint.
Das gute Verhalten ist eingebaut und heißt im Fachjargon font-display. Damit zeigt die Seite den Text sofort in einer Systemschrift und tauscht die schöne Schrift nach, sobald sie geladen ist. Der Inhalt ist von der ersten Sekunde an lesbar, das Layout zuckt höchstens kurz.
Eine Ersatzschrift, die wirklich passt
Damit dieser Tausch ruhig abläuft, braucht jede Webschrift eine benannte Reihe von Ausweich-Schriften. Fällt die erste aus, springt die nächste ein, am Ende immer eine Schrift, die auf jedem Gerät vorhanden ist.
Wichtig ist, dass die Ersatzschrift der Wunschschrift ähnelt. Eine schmale Schrift braucht eine schmale Ausweichschrift, sonst springt das Layout beim Nachladen sichtbar. Woran erkennst Du das? Lade Deine Seite mehrmals neu und beobachte den ersten Moment. Reißt der Text kurz die Breite auf oder flackert er in einer fremden Form, passt die Reihenfolge noch nicht.
Du musst das nicht selbst einrichten. Aber Du kannst Deine Agentur danach fragen: Bleibt der Text lesbar, wenn die Hauptschrift fehlt, und wie nah ist die Ersatzschrift an der echten? Eine gute Antwort darauf trennt sauberes Handwerk von hübsch geklicktem Stückwerk.
Warum Icon-Fonts den Screenreader verwirren
Symbole aus einem Icon-Font sitzen technisch in einem unsichtbaren Bereich der Schrift, den sonst niemand benutzt. Für das Auge erscheint dort ein sauberer Briefumschlag. Eine Hilfssoftware liest dieselbe Stelle jedoch als das, was sie wirklich ist: ein Privatzeichen ohne Bedeutung.
Im Ergebnis hört ein blinder Besucher an dieser Stelle ein zusammenhangloses Zeichen, einen kryptischen Laut oder schlicht nichts. Die Lupe, die für ihn die Suche öffnen sollte, wird zu einem Stolperstein ohne Namen.
Verschärft wird das, wenn die richtige Schrift fehlt. Dann fällt sogar das Bildchen aus, und an seiner Stelle steht ein leeres Rechteck oder ein fremdes Zeichen. Aus dem Warenkorb wird ein Kästchen, das niemand deuten kann, weder mit den Augen noch mit den Ohren.
Symbole für alle lesbar machen
Die Lösung folgt demselben Prinzip wie bei jedem anderen Symbol. Wie Du Symbole sauber benennst und wann ein sichtbares Wort danebengehört, zeigt der eigene Beitrag zu barrierefreien Icons und ihrer Bedeutung. Zwei Handgriffe greifen hier ineinander.
Das reine Zierzeichen wird für die Hilfssoftware ausgeblendet, damit es seinen Privatzeichen-Müll nicht vorliest. Und die Aktion dahinter bekommt einen echten Namen, den die Software ansagen kann: „Suche", „Menü", „In den Warenkorb". Sehende sehen weiter das Symbol, alle anderen hören die Bedeutung.
Robuster als ein Icon-Font ist für Symbole oft ein eingebettetes Vektorbild, ein sogenanntes SVG. Es bleibt sichtbar, auch wenn eine Schriftdatei fehlt, und lässt sich ebenso sauber beschriften. Du musst diese Wahl nicht selbst treffen, aber Du kannst fragen, ob ein zentrales Symbol noch funktioniert, wenn die Schrift einmal ausfällt.
Woran Du ein gutes Beispiel erkennst
Du kannst die wichtigsten Punkte selbst prüfen, ganz ohne Werkzeug. Drei kleine Tests reichen für den ersten Eindruck.
- Neu laden und schauen: Lädt der Text sofort sichtbar, bevor die schöne Schrift greift? Dann arbeitet die Seite mit einer Ersatzschrift.
- Verbindung drosseln: Öffne die Seite einmal bei schlechtem Netz. Bleiben Text und wichtige Symbole erkennbar, trägt das Fundament.
- Symbole abfragen: Hat jeder reine Symbol-Knopf ein erkennbares Wort daneben oder als hinterlegte Beschriftung? Dann findet auch die Hilfssoftware hindurch.
Fällt einer dieser Tests durch, hast Du eine klare, kleine Aufgabe an die Hand bekommen, die Deine Agentur ohne großen Aufwand löst.
Was Du für Schrift und Symbole einforderst
Du musst die Technik nicht beherrschen, um sie einzufordern. Drei Sätze genügen, um die richtigen Weichen zu stellen.
Bitte um eine Schrift, die den Text sofort sichtbar zeigt und die schöne Variante nachlädt. Bitte um eine Ersatzschrift, die der gewählten nahekommt, damit nichts springt. Und bitte darum, dass jedes bedeutungstragende Symbol einen vorlesbaren Namen trägt und reine Zierde für die Hilfssoftware ausgeblendet bleibt.
Dieselbe Sorgfalt lohnt sich beim Einbinden externer Schriften ohnehin. Wer Google Fonts direkt vom fremden Server lädt, handelt sich rechtliche Risiken ein. Wie Du externe Schriften DSGVO-sicher lokal einbindest, klärt der eigene Beitrag dazu, und nebenbei lädt eine lokale Schrift meist schneller.
Fazit
Webfonts und Icon-Fonts sind kleine Bausteine mit großer Wirkung auf die Bedienbarkeit. Fehlt das Sicherheitsnetz, verschwindet im Ernstfall der Text oder ein Symbol wird zur stummen Sackgasse.
Die Absicherung kostet wenig und schützt jeden Besucher: lesbarer Text auch bei Ladefehler, beschriftete Symbole auch ohne Augen. Wer auf Lesbarkeit insgesamt achten will, findet im Beitrag zu lesbarer Schrift und Typografie die nächste Stellschraube. Frag bei Deiner Seite gezielt nach diesen Punkten, dann trägt die Schrift, statt im Weg zu stehen.