FontData — Schnittstelle · JavaScript-Referenz

Signatur

interface FontData

Beschreibung

Das Interface FontData gehört zur Local Font Access API. Jede Instanz steht für genau einen Schriftschnitt, der auf dem System des Nutzers installiert ist, zum Beispiel „Arial Bold Italic“. Man erzeugt FontData-Objekte nicht selbst. Man bekommt sie als Array-Einträge aus dem Promise von window.queryLocalFonts().

Ein FontData-Objekt hat diese schreibgeschützten Eigenschaften:

family: der Name der Schriftfamilie, z. B. "Helvetica Neue"
fullName: der vollständige Name des Schnitts, z. B. "Helvetica Neue Bold"
postscriptName: der eindeutige PostScript-Name, z. B. "HelveticaNeue-Bold"
style: die Stilbezeichnung, z. B. "Bold" oder "Italic"

Dazu kommt die Methode blob(). Sie gibt ein Promise<Blob> mit den vollständigen Binärdaten der Schriftdatei zurück, also den SFNT-Daten von TrueType bzw. OpenType.

Typische Einsatzgebiete sind Design- und Grafikprogramme im Browser, zum Beispiel Bildbearbeitung, Präsentations- oder Layout-Werkzeuge. Nutzer sollen dort ihre lokal installierten Schriften auswählen können, ohne sie vorher hochzuladen. Mit den Rohdaten aus blob() kann man Schriften außerdem genauer untersuchen, etwa OpenType-Tabellen auslesen, eigene Text-Rendering-Engines betreiben oder Schriften in exportierte PDFs einbetten.

Rückgabewert

Typ

FontData

Beschreibung

Kein eigener Konstruktor. Instanzen stecken im Array, mit dem das Promise von window.queryLocalFonts() erfüllt wird. Die Methode blob() gibt Promise<Blob> zurück.

Beispiele

Lokale Schriften per Klick abfragen und auflisten

const button = document.querySelector('#fonts-laden');

button.addEventListener('click', async () => {
  if (!('queryLocalFonts' in window)) {
    console.warn('Local Font Access API wird nicht unterstützt.');
    return;
  }
  try {
    // Muss durch eine Nutzeraktion ausgelöst werden (Berechtigungsabfrage)
    const fonts = await window.queryLocalFonts();
    for (const font of fonts.slice(0, 3)) {
      console.log(font.postscriptName, '|', font.fullName, '|', font.family, '|', font.style);
    }
  } catch (err) {
    console.error('Zugriff verweigert oder fehlgeschlagen:', err.name, err.message);
  }
});

Schriften nach Familie gruppieren (z. B. für ein Auswahlmenü)

const gruppiereNachFamilie = async () => {
  const fonts = await window.queryLocalFonts();
  const familien = new Map();
  for (const font of fonts) {
    if (!familien.has(font.family)) familien.set(font.family, []);
    familien.get(font.family).push(font.style);
  }
  return familien;
};

document.querySelector('#menu').addEventListener('click', async () => {
  const familien = await gruppiereNachFamilie();
  console.log(familien.get('Arial'));
});

["Regular", "Bold", "Italic", "Bold Italic"]

Schriftformat über blob() erkennen

const ermittleFormat = async (font) => {
  const blob = await font.blob();
  // Die ersten 4 Bytes enthalten die SFNT-Version
  const kopf = await blob.slice(0, 4).arrayBuffer();
  const version = new DataView(kopf).getUint32(0);
  switch (version) {
    case 0x00010000: return 'TrueType-Konturen';
    case 0x4F54544F: return 'CFF-Konturen (OTTO)';
    case 0x74727565: return 'TrueType (Apple, "true")';
    case 0x74797031: return 'PostScript Typ 1 ("typ1")';
    default: return 'Unbekanntes Format';
  }
};

document.querySelector('#analyse').addEventListener('click', async () => {
  const [font] = await window.queryLocalFonts({ postscriptNames: ['ArialMT'] });
  if (font) console.log(font.fullName, '→', await ermittleFormat(font));
});

Arial → TrueType-Konturen

Lokale Schrift als FontFace im Dokument registrieren

document.querySelector('#anwenden').addEventListener('click', async () => {
  const [font] = await window.queryLocalFonts({ postscriptNames: ['Georgia'] });
  if (!font) return;
  const daten = await (await font.blob()).arrayBuffer();
  const face = new FontFace('MeineLokaleSchrift', daten);
  await face.load();
  document.fonts.add(face);
  document.body.style.fontFamily = 'MeineLokaleSchrift, serif';
  console.log('Geladen:', face.status);
});

Geladen: loaded

// Wichtig · Fallstricke

Experimentell und nur in Chromium verfügbar: Chrome und Edge unterstützen die API ab Version 103 auf dem Desktop. Firefox und Safari unterstützen sie nicht. Prüfen Sie vorher mit 'queryLocalFonts' in window, ob die API vorhanden ist.
Nur im sicheren Kontext: Die API funktioniert nur über HTTPS oder auf localhost.
Berechtigung nötig: Der Nutzer muss die Berechtigung "local-fonts" erteilen. Die erste Abfrage mit queryLocalFonts() muss durch eine Nutzeraktion wie einen Klick ausgelöst werden, sonst schlägt sie mit SecurityError fehl. Lehnt der Nutzer ab, wird das Promise mit NotAllowedError abgelehnt. Den aktuellen Stand fragen Sie mit navigator.permissions.query({ name: 'local-fonts' }) ab.
Permissions-Policy: In iframes muss die Einbettung die Funktion erlauben, z. B. mit allow="local-fonts".
Datenschutz: Die Liste der installierten Schriften ist ein starkes Merkmal für Fingerprinting. Fragen Sie deshalb nur ab, wenn es nötig ist, und begründen Sie die Anfrage gegenüber dem Nutzer.
Performance: blob() lädt die ganze Schriftdatei, und die kann mehrere Megabyte groß sein, bei CJK-Schriften sogar noch mehr. Rufen Sie blob() deshalb nur für die Schnitte auf, die Sie wirklich brauchen. Mit der Option postscriptNames von queryLocalFonts() können Sie die Abfrage vorab eingrenzen.
Lizenzen: Viele lokal installierte Schriften dürfen laut Lizenz nicht weitergegeben werden. Laden Sie die Rohdaten nicht ohne Weiteres auf einen Server hoch und betten Sie sie nicht ungeprüft in Dateien ein.

Siehe auch

Blob FormData FontFace Metadata AudioData