FontFaceSet.delete() — Methode · JavaScript-Referenz

Signatur

FontFaceSet.prototype.delete(font)

Beschreibung

Die Methode delete() gehört zur Schnittstelle FontFaceSet der CSS Font Loading API. Sie entfernt ein bestimmtes FontFace-Objekt aus dem Set. Im Dokument ist das meist document.fonts, in Web Workern self.fonts. Danach steht die Schrift zum Rendern nicht mehr zur Verfügung. Elemente, die sie über font-family nutzen, fallen auf die nächste Schrift in ihrer Schriftliste zurück.

Typische Einsatzfälle:

Dynamisch geladene Schriften wieder freigeben, z. B. in einem Schrift-Editor oder einer Vorschau.
Zwischen Themes oder Markenschriften wechseln, ohne dass alte Schriften registriert bleiben.
Eine Schrift ersetzen: die alte Version mit delete() entfernen und die neue mit add() hinzufügen.

Entfernt wird nur genau das Objekt, das vorher hinzugefügt wurde. Ein neues FontFace mit gleicher Familie und Quelle ist ein anderes Objekt und wird nicht erkannt. Heben Sie die Referenz deshalb auf, z. B. in einer Variablen oder einer Map. Außerdem lassen sich nur Schriften entfernen, die per JavaScript hinzugefügt wurden. Schriften aus einer CSS-Regel @font-face gelten als „CSS-verbunden“ und bleiben erhalten.

Parameter

Name	Typ	Default	Beschreibung
$font Pflicht	FontFace		Das `FontFace`-Objekt, das entfernt werden soll. Es muss dieselbe Objekt-Referenz sein, die vorher mit `add()` hinzugefügt wurde.

Rückgabewert

Typ

boolean

Beschreibung

true, wenn die Schrift gefunden und entfernt wurde. false, wenn sie nicht im Set war oder aus einer CSS-Regel @font-face stammt.

Beispiele

Schrift hinzufügen und wieder entfernen

const font = new FontFace('Vorschau', 'url(/fonts/vorschau.woff2)');

await font.load();
document.fonts.add(font);
console.log(document.fonts.has(font));

const entfernt = document.fonts.delete(font);
console.log(entfernt, document.fonts.has(font));

// Ein zweiter Versuch schlägt fehl – die Schrift ist schon weg
console.log(document.fonts.delete(font));

true true false false

Fallstrick: neues Objekt mit gleichen Daten

const original = new FontFace('Marke', 'url(/fonts/marke.woff2)');
document.fonts.add(original);

// Gleiche Familie, gleiche Quelle – aber ein ANDERES Objekt
const kopie = new FontFace('Marke', 'url(/fonts/marke.woff2)');
console.log(document.fonts.delete(kopie));    // nicht gefunden
console.log(document.fonts.delete(original)); // richtige Referenz

false true

Theme-Wechsel: Schriften je Theme verwalten

const themeFonts = new Map();

const ladeTheme = async (name, familie, url) => {
  // Alte Schriften des vorherigen Themes entfernen
  for (const [alt, face] of themeFonts) {
    document.fonts.delete(face);
    themeFonts.delete(alt);
  }

  const face = new FontFace(familie, `url(${url})`, { display: 'swap' });
  await face.load();
  document.fonts.add(face);
  themeFonts.set(name, face);
  document.documentElement.style.setProperty('--font-theme', `"${familie}", sans-serif`);
  console.log(`Theme ${name} aktiv, Schriften im Set: ${document.fonts.size}`);
};

await ladeTheme('hell', 'Hell Sans', '/fonts/hell.woff2');
await ladeTheme('dunkel', 'Dunkel Serif', '/fonts/dunkel.woff2');

Theme hell aktiv, Schriften im Set: 1 Theme dunkel aktiv, Schriften im Set: 1

CSS-verbundene Schriften lassen sich nicht entfernen

// Angenommen, im Stylesheet steht: @font-face { font-family: 'Basis'; src: url(/fonts/basis.woff2); }
for (const face of document.fonts) {
  if (face.family.replace(/"/g, '') === 'Basis') {
    console.log(document.fonts.delete(face));
  }
}

false

// Wichtig · Fallstricke

Nur dieselbe Referenz: delete() vergleicht Objekte, nicht Familienname oder Quelle. Speichern Sie hinzugefügte FontFace-Objekte, wenn Sie sie später entfernen wollen.
CSS-verbundene Schriften: Schriften aus @font-face liefern false und bleiben im Set. Um sie loszuwerden, müssen Sie die CSS-Regel selbst entfernen, z. B. das Stylesheet abschalten.
Keine Ausnahme bei Fehlschlag: Die Methode wirft keinen Fehler, sondern gibt nur false zurück. Prüfen Sie den Rückgabewert, wenn der Erfolg wichtig ist.
Rendering: Nach dem Entfernen wird der Text sofort mit der Ersatzschrift neu dargestellt. Das kann zu einem sichtbaren Layoutsprung führen. Beim Austauschen daher erst die neue Schrift laden (await face.load()), dann die alte entfernen.
Speicher: Solange Ihr Code noch eine Referenz auf das FontFace hält, kann der Browser den Speicher nicht freigeben.
Kompatibilität: document.fonts.delete() funktioniert in allen modernen Browsern (Chrome/Edge, Firefox, Safari). In Web Workern (self.fonts) ist die Unterstützung eingeschränkter. Prüfen Sie dort vorher mit 'fonts' in self.

Siehe auch

FontFaceSet FontFaceSet.add() FontFaceSet.clear() FontFaceSet.has() FontFaceSet.load() FontFace Document.fonts