Timing mit Web Fonts

[admin]

Ich mache gerade auf html.de erste Experimente mit Web Fonts. So nutzt der Standard-Style z.B. die Schriftart OpenSans. In langsamen Internetverbindungen gibt es allerdings dabei Timing Probleme.

Diese Webseite bindet die Web Fonts (bzw. den Web Font) direkt von Google ein. Der link auf das entsprechende CSS steht ganz oben im Header, sollte also eigentlich als erstes abgerufen werden. Die Seite selber wird über CSSe gestylt, die auf der Domain html.de liegen.

Bei langsamen Verbindungen ist es ab und zu so, dass die Schrift komplett unsichtbar ist und erst nach einigen Sekunden erscheint. Da ist es also offensichtlich so, dass das CSS von html.de welches die SchriftArt zuweist zuerst geladen (und ausgeführt) wird, bevor die eingebundene Schriftart geladen werden konnte.

Hat jemand eine Idee wie man dieses Flackern verhindern kann?

 

[nookie]

Nennt sich auch FOUT (flash of unstyled text), wenn man das auch auf das einbinden der Google Fonts beziehen kann. Hast du schon mal versucht die Font per font-face einzubinden?

Der Artikel sollte eigentlich dein Problem beheben:
http://www.paulirish.com/2009/fighting-the-font-face-fout/

 

[admin]

Der Artikel enthält allerdings leider keine Lösung. Die gesamte Seite auf unsichtbar zu schalten bis der Font geladen ist (via Javascript Events) ist auch etwas übertrieben.

Was ist aus Eurer Sicht besser:

1. Text Rendern sofort, dann Fontwechsel nach Laden des Fonts (FOUT im eigentlichen Sinne)
2. Das Chrome-Verhalten: Kein Text anzeigen, Rendern erst nach Laden des Textes