17. Januar 2017

CSS3 Font-Display Tag eröffnet neue Möglichkeiten. Die Einbindung von Webfonts ist im regulären Webdesign Standard, geschieht jedoch mit aufwändigeren JavaScript-Lösungen oder per CSS, wobei es zum sogenannten FOITE (Flash Of Invisible Text Effect) kommt, weil Texte erst angezeigt werden, wenn die Schriftart vollständig geladen wurde.

Mit dem neuen CSS3 Font-Display Tag gibt es Möglichkeiten, FOITE vorzubeugen, ohne Javascript-Lösungen einzubinden.

Nutzung des CSS3 Font-Display Tag

CSS3 Font-Display Tag

CSS3 Font-Display Tag

Die Nutzung des CSS3 Font-Display Tags geschieht innerhalb einer @Fontface Desklaration und kann folgende Werte annehmen:

  • auto: behält die ursprüngliche Funktionsweise bei (Texte werden angezeigt, wenn der Font vollständig geladen ist), stattdessen kann der CSS3 Font-Display Tag auch gar nicht genutzt werden
  • swap: Text wird mit Fallback Schriftart angezeigt und erst mit der korrekten dargestellt, sobald diese geladen wurde. Der CSS3 Font-Display Tag imitiert damit JS Lösungen
  • fallback: nach Verzögerung von 100 Millisekunden beim Laden der gewünschten Schriftart wird die nächste der CSS-Erbfolge verwendet, bis die eigentliche vollständig geladen ist (das CSS3 Font-Display Tag bietet keine Einstellungsmöglichkeiten für diese Zeitgrenze)
  • optional: wie fallback, zeigt die Schrift aber nicht an, wenn Internetverbindung zu langsam (keine Möglichkeit im CSS3 Font-Display Tag, diese Grenze zu bestimmen)

CSS3 Font-Display Tag noch nicht überall

Der CSS3 Font-Display-Tag wird aktuell von Chrome und Opera unterstützt, wobei auch die mobilen Versionen den CSS3 Font-Display-Tag unterstützen. Andere Browser werden hoffentlich nach ziehen um diese einfache Möglichkeit Platz zu sparen und den Aufwand für individuelle Schriften geringer zu halten.