Verzögerte Darstellung von Webfonts

[Lars Kähler]

Hallo!

Mir ist an Ralfs Agenturseite eine Verzögerung beim Nachladen des Webfonts aufgefallen. Und das, was ich vorher sehe, ist zwar der richtige Text, auch in Versalien und sogar mit den tatsächlichen Farben, aber der Webfonts tritt wie gesagt erst mit zeitlicher Verzögerung in Erscheinung.Frage: Lässt sich das umgehen? Ist das ein Fehler? Oder muss man damit leben?

[Ralf Herrmann]

Das heißt »Flash of unstyled Text« und unter diesem Suchbegriff findest du entsprechende Beschreibungen und »Lösungsansätze« sofern du diese als nötig erachtest.

http://www.webmonkey.com/2010/05/dealing-with-the-dreaded-flash-of-unstyled-text/

http://paulirish.com/2009/fighting-the-font-face-fout/

http://blog.typekit.com/2010/10/29/font-events-controlling-the-fout/

[Lars Kähler]

Allerdings halte ich das für notwendig. Ich werde das jedenfalls so lange nicht einsetzen, bis diese nervöse Geflacker nicht endlich verschwunden ist. Gibt es da wirklich keinen allgemein akzeptierten workaround?

[Mueck]

ist hier im forum nicht auch alles webfont?

weil mir schon auffiel, dass die schrift immer nach den graphischen elementen kommt ...

[Lars Kähler]

nötig

Ja, wirklich. Ich habe mich bei meiner allerersten Homepage, einer Fotogalerie, schon geärgert, dass ich die Schriften nicht festlegen konnte. Als Schriftsetzer. Gewohnt, an sündhaft teuren UNIX-Workstations Seiten aufzubauen. Der auch schon seinerzeit im Fotosatz geahnt hat, dass dieses widerliche grüne Geflimmer der Kommandos und Texte nicht der Weisheit letzter Schluss sein würde. Deshalb habe ich das in Flash gebaut. Und mir dafür, also für die Verwendung eines proprietären Formats, prompt öffentliche Schelte eingehandelt. Dabei hätte ich zu der Zeit gar keine andere Option gehabt, als erstmal auf gewählte und passende Schriften zu verzichten. Es ging schließlich schlicht und ergreifend nicht nur langsam oder unvollkommen, sondern gar nicht.

Das fand ich einfach nur schlecht. Billig. Unfertig. Wie gewollt und nicht gekonnt. Na, Du kleines süßes www, bist Du denn noch zu blöd, mir unsere Jahrtausende alten Schriften darzustellen? Kann ja wohl nicht angehen! Und kaum naht Besserung mit diesen Webfonts, da wird ein derartiges Gedöns darum veranstaltet, dabei geht es doch um die schlichte Nachbesserung eines nur rudimentär entwickelten Mediums. Na gut, das ist vielleicht übertrieben. Aber ich habe mich darüber schon sehr geärgert und auch mit Dir hier darüber gestritten.

[Ralf Herrmann]

Allerdings halte ich das für notwendig. Ich werde das jedenfalls so lange nicht einsetzen, bis diese nervöse Geflacker nicht endlich verschwunden ist. Gibt es da wirklich keinen allgemein akzeptierten workaround?

Dieses Verhalten hat ausschließlich Firefox auf diese Weise implementiert. Ich hab das auch damals mit den Entwicklern selbst per E-Mail endlos diskutiert, um zumindest Code-seitig eine Hintertür zu erhalten, dieses Standardverhalten zu unterdrücken. Fakt ist: Es ist ein Feature – kein Bug. Webfonts können mehrere Megabyte groß sein. Ob ein großes Bild erst nach einer Weile fertig geladen ist, stört niemand, aber wenn man auf leere Webseite starrt, bis alle Webfonts geladen sind, dann ist das auch nicht ideal. Daher zeigt Firefox eben erst die Fallback-Fonts an und umbricht dann neu, wenn die Webfonts geladen sind.

Die empfehlenswerteste Methode dagen ist wahrscheinlich die Benutzung des Webfont Loaders von Google. Damit kann man per CSS die Texte ausblenden, solange die Webfonts noch nicht geladen sind:

https://developers.google.com/webfonts/docs/webfont_loader

Persönlich setze ich nichts dergleichen ein. Wer Firefox nutzt, hat diesen Effekt ohnehin auf praktisch jeder Seite mit Webfonts.

[Mach]

Das Problem ist doch vor ziemlich genau einem Jahr in Firefox 4 deutlichst verbessert worden und tritt jetzt nur noch bei langen Ladezeiten auf (schlechte Verbindung/riesige Fonts). Vorher trat es auf allen Internetseiten mit @font-face auf, jetzt begegne ich dem Problem praktisch nicht mehr, nicht einmal mehr auf meinen eigenen Testseiten, wo ich absichtlich bis zu sechs verschiedene, unkomprimierte Versionen von einem relativ langsamen Server lade (und wo ich auf Firefox angewiesen bin, weil nur Firefox die OpenType-Intelligenz richtig darstellt): Wie bei einem Bild ist kurz nichts zu sehen, und der Text erscheint – wie in Webkit – erst nach einer kurzen Verzögerung (gleich im richtigen Font).

[Ralf Herrmann]

Ah, interessant, dass sie noch umgeschwenkt sind. Hab gerade nochmal nachgelesen. Offenbar gibt es ein 3-Sekunden-Fenster, in dem der Webfont geladen werden kann, bis FF dann entweder selbigen oder doch den Fallback-Font anzeigt.

[RobertMichael]

ich wollts gerade schreiben. ich arbeite mit FF täglich und

habe dieses problem schon lange nicht mehr beobachten können.

[Lars Kähler]

Vielen Dank für die vielen Antworten!

Firefox benutze ich ja gar nicht. Ich habe hier einen Mac mit Safari und ein Laptop, auf dem Windows 7 läuft. Als Browser verwende ich Opera. Dort habe ich dies Phänomen eben zufällig an Ralfs Seite bemerkt. Bitte sagt mir, was ich beachten muss, um doch noch in den Genuss von webfonts zu gelangen.

BTW: Wieso eigentlich „webfonts“? Für mich sind das „Schriften“.

[Ralf Herrmann]

Opera und Webfonts sind auch ein leidiges Thema …

Es braucht einen eigenen Namen, da es es eine eigene Technologie ist (@font-face im Gegensatz zu Systemfonts, die auf Webseiten angesprochen werden) und da sie in der Regel eine eigene Webfont-Lizenz erfordern.

[Joshua K.]

Auch ich nutze Opera und sehe den Text für Bruchteile einer Sekunde in einer Standardschrift. Das stört mich jedoch nicht, weil gleichzeitig Bilder und andere Elemente aufgebaut werden, sodaß sich die Seite sowieso bewegt.

Lars, dauert das Laden der Schriften bei Dir vielleicht länger, weil Du eine eher langsame Verbindung hast?

[Lars Kähler]

Nein. Es stört mich einfach. Mir wäre es lieber, wenn während der Ladezeit überhaupt aller Seiten gar nichts zu sehen ist. Ich bin gern bereit, auf einen Browser umzusteigen, der das kann. Meinetwegen auch Konqueror auf Linux.

[Sebastian Nagel]

Firefox könnte das vielleicht (müsste ausprobiert werden):

http://www.pcruneasy.com/tutorials/firefox/about/speed-rendering.php

Hier ist eine (englische) Anleitung, wie die Wartezeit, bevor Firefox *irgendwas* anzeigt, verkürzt wird (von standardmäßig 250ms auf 0ms) – dadurch ensteht der Eindruck, die Seite lade schneller.

Ginge man in die entgegengesetzte Richtung (1000ms, 2000ms?), wäre vielleicht genug Zeit, CSS, Fonts etc. zu laden, bevor der Versuch einer Darstellung beginnt.

[Lars Kähler]

Seltsam, dass Euch alle so etwas nicht zu stören scheint. Ich würde auch ganz gern Opera oder Safari benutzen. Ich warte auf den Tag, wo ich den Browser begrüßen darf, der 99 % aller Seiten korrekt darstellt.

Stellt Euch das doch mal im Printbereich vor: Für jede Magazinseite muss erstmal 10 Sekunden gewartet werden, bevor sich die Bilder und Schriften nachgeladen haben!

[Cajon]

Wenn die Schriftdateien auf einer Seite einmal geladen sind, dann hast du sie doch im Cache. Also solltest du sie nur einmal laden müssen.

[Ralf Herrmann]

Nein. Es stört mich einfach. Mir wäre es lieber, wenn während der Ladezeit überhaupt aller Seiten gar nichts zu sehen ist.

Das hatten wir bei Flash-Seiten früher. Diese unsäglichen Counter von 1 bis 100%. Und auch heute könnte man das JavaScript für normale Webseiten umsetzen – es will aber keiner, oder andersherum gesagt: die Leute würden es hassen, Webseiten so betrachten zu müssen.

Eine Webseite ist, im Gegensatz zu Druckseiten, in der Regel länger als der Bereich, den wir auf einmal erfassen können. Warum sollte man warten müssen, bis Inhalte geladen sind, die wir überhaupt nicht sehen können!? Das macht keine Sinn.

[Mach]

Eine bekannte Seite, die einen solchen Counter einsetzt, ist gmail.

Mich selber hat der Flash of Unstyled Text auch sehr gestört. In Firefox, Safari oder Chrome/Chromium tritt das Problem aber nicht mehr auf. Ich hatte nicht gewusst, dass es in Opera noch immer nicht behoben worden ist. Mein Tipp wäre Umsteigen auf Firefox. Da tritt nicht nur der Flash of Unstyled Text nicht mehr auf*, sondern darüber hinaus sind auch die SmartFont-Features des OpenType Layout zuverlässig umgesetzt (im Gegensatz zu Webkit und Trident, wo je nach Kombination von OS und Feature und Mondphase ein anderes Resultat entsteht) (ausserdem wird SIL Graphite umgesetzt). Für typografisch Interessierte ist also Firefox der Browser der Wahl.

*Es sei denn – wie Ralf gesagt hat–, die Ladezeit übersteige 3 Sekunden. Das ist aber sowieso eine inakzeptable, übermässige Wartezeit, die wohl nur bei sehr schlechter Internetverbindung, miserablem Server oder abartigen Schriftgrössen auftritt, m.a.W., praktisch nie.

[Joshua K.]

Typographie ist allerdings nicht alles. Nur wegen Graphite-Unterstützung auf einen aufgeblähten, speicherfressenden, langsameren Browser umsteigen würde ich nur, wenn ich diese Funktion unbedingt bräuchte.

Nachtrag: Falls gewünscht, können wir einen Browser-Flamewar gerne in einem neuen Thema durchführen.

[Mach]

Wegen Graphite sollte man nicht auf Firefox umsteigen, ausser man verwendet eine der ganz wenigen Schriften mit Graphite. Aber wegen dem OpenType Layout ist es schon eine Erwägung wert, denn wenn irgendeine Smarfont-Technologie verwendet wird, dann am ehesten das OpenType Layout. Auf jeden Fall ist der Flash of Unstyled Text kein Argument mehr gegen Firefox, sondern offenbar nur noch gegen Opera.

[Sebastian Nagel]

Unter Windows Vista/7 übrigens auch wegen des Fontrenderings – IE und Firefox nutzen das neuere, doch deutlich schönere Directwrite, Opera und Chrome momentan noch das alte GDI+.

(sofern man geglätteten Text generell mag und nicht True-Oldschool seine Pixel zählen können will).

[Lars Kähler]

Ich habe ja mal Software- und Hardwareentwicklung erleben dürfen im Produktmanagement von Linotype-Hell (Produktentwicklung). Von daher nehme ich grundsätzlich rein gar nichts als gegeben hin. Wenn mir also mein alter Trabbi nicht gefällt, kaufe ich mir stattdessen einen Porsche Carrera 911 Cabriolet. Har har!

Ich kann mich wirklich nur wiederholen: Wenn wir im Printbereich noch derartig unfertige Werkzeuge benutzen müssten wie im Web, würden Millionenschäden entstehen. Es hat ~ 50 Jahre gebraucht, bis von der ersten diatype zum heutigen InDesign die tools immer weiter optimiert wurden. Ich bin persönlich von der Adobe-Software sehr angetan bis begeistert, aber das Web befindet sich immer noch in den Kinderschuhen. IMNSHO.

Ich schmolle jetzt auf der grünen Wiese, lasse meinen Computer zu Hause und lese einen schönen Playboy!

[Sebastian Nagel]

Kühne Theorie: Das Web hat andere Eigenschaften und Vorzüge – wenn es wie Print sein sollte, könnten wir bei Print bleiben.

[Lars Kähler]

Werden wir doch auch. Schon vor 20 Jahren wurde über neue Distributionsformen im Nachrichtensektor nachgedacht. Eine Idee war es gewesen, spezielle Drucker zu entwickeln, die in Hotels oder an Bahnhöfen o.ä. aufgestellt werden, um Zeitungen und ähnliches auszugeben. Wenn ich es wünsche, kann ich ja auch heute meine Inhalte drucken und ausgeben. Ich glaube aber nicht, dass das heutzutage noch groß Sinn macht. Jedenfalls bin ich nicht bereit, beim Stand der heutigen Telekommunikation mehr als 30,- € für Telefon und Internet auszugeben.

Aber da eine ausgewachsene Rollenrotation, sei es nun Heatset, Zeitung oder Triefdruck, etwas kostenspieliger ist als irgendsoein Tintenpisser oder Laser, wird man sich in Sachen Ausgabequalität wohl mit 72 oder 96 dpi begnügen müssen und auf Extras wie Hochglanz, Metalliceffekte und Spotlackierung für's Erste verzichten müssen. Stattdessen bepatzen wir unser "HighTech equipment" weiterhin mit unseren Fingern.