FontFace.load() — Methode · JavaScript-Referenz

Signatur

FontFace.prototype.load()

Beschreibung

Die Methode load() des FontFace-Interfaces startet das Laden einer Schriftart, deren Quelle beim Erzeugen als URL angegeben wurde (z. B. url(/fonts/inter.woff2)). Sie gibt ein Promise zurück, das mit dem FontFace-Objekt selbst erfüllt wird, sobald die Schrift vollständig geladen und verarbeitet ist.

Sinnvoll ist load(), wenn Schriften dynamisch nachgeladen werden sollen – etwa für Canvas-Zeichnungen, Editoren mit wählbaren Schriften oder um ein Aufblitzen ungestylten Textes (FOUT) gezielt zu steuern. Nach erfolgreichem Laden fügt man die Schrift mit document.fonts.add(font) dem FontFaceSet des Dokuments hinzu, damit sie in CSS und Canvas verwendet werden kann.

Während des Ladevorgangs wechselt FontFace.status von "unloaded" über "loading" zu "loaded" bzw. "error". Wird load() mehrfach aufgerufen, wird kein zweiter Download gestartet; es wird dasselbe Promise wie FontFace.loaded zurückgegeben.

Wurde die Quelle als Binärdaten (ArrayBuffer oder TypedArray) übergeben, wird die Schrift bereits im Konstruktor verarbeitet; load() hat dann keine zusätzliche Wirkung und liefert einfach das bestehende Promise.

Rückgabewert

Typ

Promise<FontFace>

Beschreibung

Ein Promise, das mit dem aktuellen FontFace-Objekt erfüllt wird, sobald die Schrift geladen ist. Bei Netzwerkfehlern oder ungültigen Schriftdaten wird es mit einer DOMException (NetworkError bzw. SyntaxError) abgelehnt.

Beispiele

Schrift laden und dem Dokument hinzufügen

const font = new FontFace('Inter', 'url(/fonts/inter-var.woff2) format("woff2")', {
  weight: '100 900',
  style: 'normal'
});

try {
  const loaded = await font.load();
  document.fonts.add(loaded);
  document.body.style.fontFamily = 'Inter, sans-serif';
  console.log(`Schrift "${loaded.family}" Status: ${loaded.status}`);
} catch (err) {
  console.error('Schrift konnte nicht geladen werden:', err.name);
}

Schrift "Inter" Status: loaded

Schrift vor dem Zeichnen auf einem Canvas laden

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

const drawTitle = async () => {
  const font = new FontFace('Lobster', 'url(https://example.com/fonts/lobster.woff2)');
  document.fonts.add(await font.load());

  // Erst jetzt ist die Schrift sicher verfügbar
  ctx.font = '48px Lobster';
  ctx.fillText('Hallo Welt', 20, 80);
};

drawTitle();

Mehrere Schriften parallel laden mit Fallback

const fonts = [
  new FontFace('Roboto', 'url(/fonts/roboto-400.woff2)', { weight: '400' }),
  new FontFace('Roboto', 'url(/fonts/roboto-700.woff2)', { weight: '700' })
];

const results = await Promise.allSettled(fonts.map((f) => f.load()));

results.forEach((r, i) => {
  if (r.status === 'fulfilled') {
    document.fonts.add(r.value);
  } else {
    console.warn(`Gewicht ${fonts[i].weight} fehlgeschlagen:`, r.reason.message);
  }
});

console.log('Geladene Schriften:', document.fonts.size);

Geladene Schriften: 2

// Wichtig · Fallstricke

Hinzufügen nicht vergessen: load() lädt die Schrift nur – sichtbar wird sie erst nach document.fonts.add(font) (in Workern: self.fonts.add()).
CORS: Schriften von fremden Origins werden im CORS-Modus angefordert. Fehlt der Header Access-Control-Allow-Origin, wird das Promise mit NetworkError abgelehnt. Auch eine Content Security Policy (font-src) kann das Laden blockieren.
Fehlerbehandlung: Das Promise immer mit try/catch oder .catch() absichern; ungültige Schriftdateien führen zu einem SyntaxError, und status steht danach dauerhaft auf "error".
Syntax der Quelle: Der Quell-String muss die CSS-Syntax url(...) verwenden; eine nackte URL ohne url() ist ungültig.
Kompatibilität: Die CSS Font Loading API wird von Chrome, Edge, Firefox und Safari unterstützt; in Web Workern ist sie in neueren Versionen verfügbar. Der Internet Explorer unterstützt sie nicht.

Siehe auch

FontFace FontFace.loaded FontFace.status FontFaceSet FontFaceSet.add() FontFaceSet.load() Document.fonts