FontFaceSet.status — Eigenschaft · JavaScript-Referenz

Signatur

FontFaceSet.status

Beschreibung

Die schreibgeschützte Eigenschaft status der Schnittstelle FontFaceSet zeigt an, ob gerade Schriftarten des Sets geladen werden. Meistens greift man darüber auf document.fonts.status zu. In Web Workern gibt es das Gegenstück self.fonts.status.

Die Eigenschaft kann nur zwei Werte haben:

"loading": Mindestens eine Schriftart im Set wird gerade geladen.
"loaded": Keine Schriftart wird geladen. Das heißt aber nicht, dass alle Schriftarten erfolgreich geladen wurden. Fehlgeschlagene Schriftarten zählen hier ebenfalls als „nicht mehr ladend“.

Mit status fragt man den Zustand zu einem bestimmten Zeitpunkt synchron ab, zum Beispiel für Diagnose, Logging oder eine schnelle Entscheidung, ob man warten muss. Wer zuverlässig auf das Ende des Ladens reagieren will, sollte stattdessen das Promise document.fonts.ready oder die Ereignisse loading, loadingdone und loadingerror verwenden.

Rückgabewert

Typ

"loading" | "loaded"

Beschreibung

Ein String: "loading", solange mindestens eine Schriftart geladen wird, sonst "loaded".

Beispiele

Aktuellen Ladezustand abfragen

// Synchrone Momentaufnahme des Ladezustands
console.log(`Schriftstatus: ${document.fonts.status}`);

Schriftstatus: loading

Status vor und nach dem Laden einer Webfont

const font = new FontFace(
  'Inter',
  'url(https://example.com/fonts/inter.woff2) format("woff2")'
);
document.fonts.add(font);

const ladeSchrift = async () => {
  const promise = font.load();
  console.log('Während des Ladens:', document.fonts.status);
  try {
    await promise;
  } catch (err) {
    console.warn('Schrift konnte nicht geladen werden:', err);
  }
  await document.fonts.ready;
  console.log('Danach:', document.fonts.status);
};

ladeSchrift();

Während des Ladens: loading Danach: loaded

Layout-Messung erst nach dem Laden der Schriften

// Textbreiten hängen von der Schrift ab. Deshalb erst messen, wenn nichts mehr lädt.
const messeUeberschrift = () => {
  const h1 = document.querySelector('h1');
  console.log('Breite:', h1.getBoundingClientRect().width);
};

if (document.fonts.status === 'loaded') {
  messeUeberschrift();
} else {
  document.fonts.ready.then(messeUeberschrift);
}

Breite: 412.5

Statuswechsel über Ereignisse verfolgen

const logStatus = (event) => {
  console.log(`${event.type} → status = ${document.fonts.status}`);
};

document.fonts.addEventListener('loading', logStatus);
document.fonts.addEventListener('loadingdone', logStatus);
document.fonts.addEventListener('loadingerror', logStatus);

loading → status = loading loadingdone → status = loaded

// Wichtig · Fallstricke

„loaded“ heißt nicht „erfolgreich“: Der Wert zeigt nur, dass gerade nichts geladen wird. Ob eine einzelne Schrift verfügbar ist, prüft man mit FontFace.status ("loaded" bzw. "error") oder mit document.fonts.check().
Momentaufnahme: Browser laden Schriftarten oft erst, wenn Text sie tatsächlich braucht. Deshalb kann status früh im Seitenaufbau schon "loaded" sein, obwohl später noch Schriften nachgeladen werden. Polling mit status ist unzuverlässig. Besser sind document.fonts.ready und die Lade-Ereignisse.
Schreibgeschützt: Eine Zuweisung wird stillschweigend ignoriert (im Strict Mode gibt es einen TypeError).
Kompatibilität: Wird in allen modernen Browsern unterstützt (Chrome, Edge, Firefox, Safari). In Workern ist self.fonts nicht überall verfügbar. Vorher mit 'fonts' in self prüfen.

Siehe auch

FontFaceSet FontFaceSet.ready FontFaceSet.check() FontFaceSet.load() FontFace.status Document.fonts