FontFaceSet.clear() — Methode · JavaScript-Referenz

Signatur

FontFaceSet.prototype.clear()

Beschreibung

Die Methode clear() des Interfaces FontFaceSet entfernt alle Schriftarten, die per Skript über FontFaceSet.add() hinzugefügt wurden. Meist ruft man sie über document.fonts auf, in Workern über self.fonts.

Wichtig: Schriftarten, die über CSS-Regeln (@font-face) definiert sind, gehören zu den sogenannten CSS-verbundenen Schriften. clear() fasst sie nicht an. Sie verschwinden nur, wenn man die zugehörige Stilregel bzw. das Stylesheet entfernt.

Typische Anwendungsfälle sind Editoren, Design-Werkzeuge oder Theme-Umschalter, die Schriften zur Laufzeit mit dem FontFace-Konstruktor laden und beim Wechsel des Themes oder Dokuments alle dynamisch geladenen Schriften auf einmal wieder loswerden wollen. Nach dem Aufruf rendert der Browser betroffene Texte neu, und zwar mit der nächsten passenden Schrift aus dem font-family-Stapel.

Beispiele

Dynamisch geladene Schrift hinzufügen und wieder entfernen

const font = new FontFace('Roboto Slab', 'url(/fonts/roboto-slab.woff2)');

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

// Alle per Skript hinzugefügten Schriften entfernen
document.fonts.clear();
console.log(document.fonts.has(font));

true false

CSS-Schriften bleiben nach clear() erhalten

// Voraussetzung: Im Stylesheet gibt es eine @font-face-Regel für 'Inter'
const dynamic = new FontFace('Lora', 'url(/fonts/lora.woff2)');
document.fonts.add(dynamic);

console.log('Vorher:', document.fonts.size);
document.fonts.clear();
console.log('Nachher:', document.fonts.size);

const families = [...document.fonts].map((f) => f.family);
console.log(families);

Vorher: 2 Nachher: 1 ["Inter"]

Theme-Wechsel: alte Schriften entfernen, neue laden

const themes = {
  klassisch: [{ family: 'Merriweather', url: '/fonts/merriweather.woff2' }],
  modern: [{ family: 'Inter', url: '/fonts/inter.woff2' }]
};

const applyTheme = async (name) => {
  // Vorherige dynamische Schriften verwerfen
  document.fonts.clear();

  const faces = themes[name].map(
    ({ family, url }) => new FontFace(family, `url(${url})`)
  );
  await Promise.all(faces.map((face) => face.load()));
  faces.forEach((face) => document.fonts.add(face));

  document.body.style.fontFamily = `'${themes[name][0].family}', sans-serif`;
  console.log(`Theme "${name}" aktiv, Schriften: ${document.fonts.size}`);
};

await applyTheme('modern');

Theme "modern" aktiv, Schriften: 1

// Wichtig · Fallstricke

Nur Schriften aus Skripten: clear() entfernt keine per @font-face in CSS deklarierten Schriften. Wer diese loswerden will, muss die Regel bzw. das Stylesheet entfernen. Mit delete() lassen sie sich ebenfalls nicht entfernen.
Neu-Rendering: Das Entfernen kann sichtbare Layout-Verschiebungen auslösen (Fallback-Schrift, andere Laufweite). Man sollte also erst die neuen Schriften laden und dann gezielt mit delete() tauschen, statt pauschal clear() aufzurufen.
Andere Bibliotheken: clear() wirkt global auf document.fonts und entfernt auch Schriften, die fremde Skripte (z. B. Web-Font-Loader, Icon-Bibliotheken) hinzugefügt haben. Das Entfernen einzelner Schriften mit delete(font) ist oft sicherer.
Worker: In Web Workern steht die Methode über self.fonts zur Verfügung. Jeder Kontext hat dabei seine eigene Menge.
Kompatibilität: Wird von Chrome, Edge, Firefox und Safari unterstützt. In sehr alten Browsern fehlt die CSS Font Loading API. Zur Sicherheit kann man mit 'fonts' in document prüfen, ob sie vorhanden ist.

Siehe auch

Document.fonts FontFaceSet.keys() FontFaceSet.check() FontFaceSet.load() FontFaceSet.delete()