Signatur
Beschreibung
Die Eigenschaft family gehört zur Local Font Access API. Jedes FontData-Objekt, das window.queryLocalFonts() liefert, steht für ein einzelnes lokal installiertes Schriftbild (z. B. „Arial Bold Italic“). family enthält dabei den Namen der Familie, zu der dieses Schriftbild gehört, zum Beispiel "Arial".
Damit lassen sich die oft sehr vielen Einzelschnitte nach Familie gruppieren, etwa für eine Schriftauswahl in Grafik- oder Design-Anwendungen. Die übrigen Eigenschaften ergänzen das: fullName enthält den vollständigen Namen, style den Schnitt (z. B. "Bold Italic") und postscriptName einen eindeutigen PostScript-Bezeichner.
Der Wert eignet sich direkt für CSS: Du kannst ihn in font-family verwenden oder mit local() in einer FontFace-Quelle angeben. Weil Familiennamen Leerzeichen enthalten können, solltest du sie in CSS in Anführungszeichen setzen.
Rückgabewert
"Arial" oder "Segoe UI". Die Eigenschaft ist schreibgeschützt.Beispiele
Familiennamen aller lokalen Schriften ausgeben
// Muss durch eine Nutzeraktion ausgelöst werden (z. B. Klick)
document.querySelector('#fonts-laden').addEventListener('click', async () => {
try {
const fonts = await window.queryLocalFonts();
for (const font of fonts) {
console.log(`${font.family} – ${font.style}`);
}
} catch (err) {
console.error('Zugriff verweigert oder nicht unterstützt:', err.name);
}
});Schriftbilder nach Familie gruppieren (Schriftauswahl)
const gruppiereNachFamilie = async () => {
const fonts = await window.queryLocalFonts();
const familien = Map.groupBy(fonts, (font) => font.family);
const select = document.querySelector('#familie');
for (const [family, schnitte] of familien) {
const option = new Option(`${family} (${schnitte.length} Schnitte)`, family);
select.append(option);
}
return familien;
};
document.querySelector('#laden').addEventListener('click', gruppiereNachFamilie);Gewählte Familie per CSS anwenden
document.querySelector('#nur-arial').addEventListener('click', async () => {
// Optional nur bestimmte Schriften per PostScript-Namen anfragen
const [font] = await window.queryLocalFonts({ postscriptNames: ['Arial-BoldMT'] });
if (!font) return console.log('Schrift nicht installiert');
// Familiennamen in Anführungszeichen setzen (Leerzeichen!)
document.querySelector('#vorschau').style.fontFamily = `"${font.family}", sans-serif`;
console.log(font.family, '/', font.fullName);
});// Wichtig · Fallstricke
- Experimentell und eingeschränkt verfügbar: nur in Chromium-Browsern (ab Version 103) und nur in sicheren Kontexten (HTTPS). Prüfe vorher mit
'queryLocalFonts' in window, ob die API vorhanden ist. - Berechtigung und Nutzeraktion:
queryLocalFonts()braucht die Berechtigunglocal-fontsund eine Nutzeraktion. Lehnt der Nutzer ab, wird einSecurityErrorgeworfen. In iframes muss zusätzlich die Permissions-Policylocal-fontserlaubt sein. - Datenschutz: Die Liste installierter Schriften kann zum Fingerprinting dienen. Frage sie deshalb nur an, wenn du sie wirklich brauchst.
- Eine Familie kommt meist mehrfach vor, nämlich einmal pro Schnitt. Für eindeutige Familiennamen hilft
new Set(fonts.map(f => f.family)). - Die Namen stammen aus den Schriftdateien selbst. Schreibweise und Lokalisierung können sich daher je nach Betriebssystem unterscheiden.