Schriftvorschau

Eigenen Text in jeder auf diesem Gerät installierten Schrift ansehen oder eine Schriftdatei hochladen — und danach das CSS kopieren.

Schriftquelle

Aktive Schrift

Listet alle auf diesem Gerät installierten Schriften. Nur in Chromium-Browsern — der Browser fragt einmal um Erlaubnis.

Hochgeladene Schriften

Noch nichts hochgeladen.

TTF, OTF, WOFF und WOFF2 bis 20 MB. Hochgeladene Schriften werden nur in dieser Seite registriert — sie werden nirgends hingeschickt und beim Neuladen verworfen.

Text & Typografie

Größe 44 px

Gewicht

Zeichenabstand 0 px

Zeilenhöhe 1.35

Stil

Schreibweise

Textfarbe

#0f172a

Hintergrund

#ffffff

Ausrichtung

Vorschau

Schriftsystem-uiQuelleGenerische Familien

Franz jagt im total verwahrlosten Taxi quer durch Bayern 0123456789

Zeichensatz

CSS

font-family: system-ui;
font-size: 44px;
font-weight: 400;
font-style: normal;
letter-spacing: 0px;
line-height: 1.35;
text-align: left;
text-transform: none;
color: #0f172a;
background-color: #ffffff;

Was ist ein Werkzeug für die Schriftvorschau?

Die meisten Schriftvorschauen im Netz zeigen dieselbe kurze Liste websicherer Schriften — eine Liste, die Sie bereits kennen und die nichts darüber aussagt, welche Schriften auf Ihrem Rechner tatsächlich installiert sind. Diese Seite geht den umgekehrten Weg und startet bei Ihrem eigenen System.

Es gibt drei Wege, eine Schrift hineinzubekommen. Die generischen Familien (system-ui, sans-serif, serif, monospace) funktionieren in jedem Browser. „Lokale Schriften lesen“ zählt über die Local Font Access API des Browsers jede auf diesem Gerät installierte Schrift auf und stellt sie in die Auswahl — sie erscheinen sofort, weil die Umrisse längst auf Ihrem Rechner liegen und nichts heruntergeladen wird. Oder Sie laden eine Schriftdatei (TTF, OTF, WOFF oder WOFF2) hoch; dann registriert die Seite sie für diese Sitzung, sodass Sie eine lizenzierte Hausschrift prüfen können, ohne sie zu installieren.

Wählen Sie eine Schrift, tippen Sie Ihren eigenen Text und stellen Sie Größe, Gewicht, Stil, Zeichenabstand, Zeilenhöhe, Farben und Ausrichtung ein. Die Zeichensatzzeile zeigt, wie Ziffern und Satzzeichen sich verhalten, und der CSS-Block ist zum Kopieren fertig — samt @font-face-Gerüst, wenn die aktive Schrift aus einer hochgeladenen Datei stammt.

Weder Ihr Text noch Ihre Datei verlassen den Browser.

Anwendung

Erste Schritte

Wählen Sie im Bereich „Schriftquelle“ eine Schrift. Die generischen Familien funktionieren überall; mit „Lokale Schriften lesen“ listen Sie alles auf, was auf diesem Gerät installiert ist.
Um eine Schrift anzusehen, die Sie als Datei haben, klicken Sie auf „Schriftdatei hochladen“ und wählen TTF, OTF, WOFF oder WOFF2. Sie wird für diese Sitzung registriert und erscheint in derselben Auswahl.
Tippen Sie den Text, den Sie prüfen möchten — eine Überschrift, eine Beschriftung, einen Produktnamen.
Stellen Sie Größe, Gewicht, Stil, Zeichenabstand, Zeilenhöhe, Ausrichtung, Schreibweise und beide Farben ein. Die Vorschau wendet dieselben CSS-Eigenschaften an wie Ihr Stylesheet.
Kopieren Sie den CSS-Block. Bei einer hochgeladenen Schrift enthält er zusätzlich ein @font-face-Gerüst, in dem der ursprüngliche Dateiname für den späteren Pfad steht.

Tipps für verlässliche Ergebnisse

Die aufgelisteten Schriften sind exakt erfasst, aber sie beschreiben ausschließlich dieses Gerät. Was hier installiert ist, haben Ihre Besucher noch lange nicht — behalten Sie im Produktions-CSS einen Rückfallstapel.
Das Auflisten lokaler Schriften funktioniert nur in Chromium und verlangt einen sicheren Kontext (HTTPS oder localhost). In Safari und Firefox wird der Knopf ausgeblendet und der Grund genannt; das Hochladen bleibt verfügbar.
Eine Familie mit mehreren Gewichten oder Stilen erscheint einmal in der Auswahl. Wechseln Sie zwischen den tatsächlich vorhandenen Schnitten mit dem Gewicht-Regler und dem Kursiv-Umschalter.
Hochgeladene Schriften liegen nur im Speicher: Neuladen verwirft sie, auf die Festplatte wird nichts geschrieben. Das ist Absicht und keine Grenze, die sich wegkonfigurieren ließe.
Große CJK-Dateien (ab etwa 10 MB) brauchen einen Moment zum Parsen; die Auswahl wird aktualisiert, sobald die Schrift dekodiert ist.

Anwendungsfälle

Eine lizenzierte oder Hausschrift prüfenLaden Sie die Datei hoch, tippen Sie die echte Überschrift und lesen Sie sie in der Größe, in der sie erscheinen soll. Kein Installieren, keine Nebenwirkungen am System, und die Datei verlässt den Browser nicht.

Inventur der Schriften auf einem RechnerMit „Lokale Schriften lesen“ erhalten Sie das exakte Verzeichnis. Praktisch, wenn eine Designübergabe von einer Schrift ausging, die gar nicht vorhanden ist, oder wenn Sie wissen müssen, welche der Kandidaten auf einem Kundenrechner liegen.

Kandidatendateien vergleichenLaden Sie zwei oder drei Gewichte beziehungsweise Schnitte derselben Familie hoch und wechseln Sie bei fester Größe zwischen ihnen. Da der Text identisch bleibt, vergleichen Sie Buchstabenformen statt sich an sie zu erinnern.

Zeichenabstand und Zeilenhöhe einstellenZeichenabstand und Zeilenhöhe hängen mit der Schrift zusammen: Eine geometrische Grotesk will bei kleinen Größen meist etwas mehr Luft, und CJK-Text verträgt eine größere Zeilenhöhe als lateinischer. Ziehen Sie an den Reglern und beobachten Sie die Zeichensatzzeile.

Ziffern und Satzzeichen prüfenTabellenziffern oder proportionale Ziffern, die Form von 1, 4 und 7 und das Aussehen von @ # & sind in zahlenlastigen Oberflächen entscheidend. Die Zeichensatzzeile legt all das in den aktuellen Einstellungen offen.

Einsatzfertiges CSS erzeugenJede Einstellung speist den CSS-Block. Stammt die aktive Schrift aus einem Upload, wird zusätzlich eine @font-face-Regel mit dem passenden format()-Schlüsselwort ausgegeben — es bleibt also nur noch die URL zu ersetzen.

Wie lokale Schriften und Uploads verarbeitet werden

Hier arbeiten zwei völlig unterschiedliche Browser-APIs, und sie verhalten sich entsprechend verschieden.

Das Auflisten installierter Schriften nutzt die Local Font Access API: window.queryLocalFonts() liefert je installiertem Schnitt einen Datensatz mit Familienname, Vollname, PostScript-Name und Stil. Die Seite fasst diese Datensätze nach Familie zusammen, sortiert sie und übergibt sie der Auswahl. Zum Rendern wird nichts heruntergeladen — der Familienname geht direkt an CSS, und die Umrisse liefert das Betriebssystem, genau wie bei Ihrem eigenen Stylesheet. Chromium bietet die API nach einer einmaligen Erlaubnis an; Safari und Firefox implementieren sie gar nicht, deshalb wird der Einstieg dort ausgeblendet statt scheitern gelassen.

Das Hochladen nutzt die Font Loading API: Die Datei wird in einen ArrayBuffer gelesen, an new FontFace(family, buffer) übergeben, geladen und in document.fonts aufgenommen. Ab diesem Moment verhält sich die Schrift wie jede andere Familie und lässt sich in CSS beim Namen nennen.

queryLocalFonts() verlangt einen sicheren Kontext (HTTPS oder localhost) und weist die Anfrage mit NotAllowedError ab, wenn der Erlaubnisdialog verworfen wird; das Feld meldet beides, statt eine Ausnahme zu werfen.
Dieselbe Familie kann in mehreren Stilen auftauchen. Die Liste wird nach Familienname entdoppelt, jede Schrift erscheint also einmal, und der Stil-Regler wählt den Schnitt.
FontFace akzeptiert TTF, OTF, WOFF und WOFF2. Eine beschädigte oder nicht unterstützte Datei lässt load() scheitern; die Seite meldet das, statt einen kaputten Eintrag in der Auswahl zu hinterlassen.
Uploads werden ausschließlich im Speicher gehalten — keine Netzwerkanfrage, kein Schreiben auf die Platte, kein localStorage. Darum überleben sie kein Neuladen.
Generische Familien löst der Browser intern auf und brauchen gar keine API; deshalb bleiben sie verfügbar, wo die beiden anderen Wege versperrt sind.

Beispiele

Die auf diesem Gerät installierten Schriften auflisten

const faces = await window.queryLocalFonts();
// [{ family: "Inter", fullName: "Inter Regular", style: "Regular" }, ...]

const families = [...new Set(faces.map((f) => f.family))].sort();

// Auswahl direkt an CSS weitergeben: Umrisse liefert das Betriebssystem,
// es wird keine Datei heruntergeladen
element.style.fontFamily = `"${families[0]}", sans-serif`;

Eine hochgeladene Datei registrieren

const buffer = await file.arrayBuffer();
const face = new FontFace("Aurora Sans", buffer);
await face.load();        // bei beschädigter Datei oder falschem Format reject
document.fonts.add(face);

// danach genau wie eine lokal installierte Schrift verwendbar
element.style.fontFamily = '"Aurora Sans", sans-serif';

Der CSS-Block für eine hochgeladene Schrift

@font-face {
  font-family: "Aurora Sans";
  src: url("./AuroraSans.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

font-family: "Aurora Sans", sans-serif;
font-size: 44px;
line-height: 1.35;
color: #0f172a;

/* Der Pfad in src ist ein Platzhalter — ersetzen Sie ihn
   durch die Adresse, unter der Sie die Datei ausliefern. */

Häufige Fragen

Warum fehlt der Knopf „Lokale Schriften lesen“ in meinem Browser?

Die Local Font Access API ist nur in Chromium-Browsern (Chrome, Edge, Opera, Brave) implementiert und verlangt eine sichere Herkunft (HTTPS oder localhost). In Safari und Firefox wird der Knopf ausgeblendet und das Feld nennt den Grund — Schriftdatei hochladen und die generischen Familien funktionieren weiterhin.

Wird beim Lesen meiner installierten Schriften etwas an einen Server gesendet?

Nein. Der Browser zeigt einen Erlaubnisdialog, und nach Ihrer Zustimmung erhält die Seite nur Familien- und Stilnamen. Es werden keine Schriftdaten gelesen, nichts hochgeladen und die Liste nirgends übertragen.

Werden hochgeladene Schriften irgendwo gespeichert oder hingesendet?

Weder noch. Die Datei wird in den Speicher gelesen, in die Schriftsammlung des Browsers aufgenommen und beim Schließen oder Neuladen verworfen. Es gibt keine Netzwerkanfrage, keinen Schreibvorgang auf der Platte und keinen Eintrag in localStorage.

Warum sind meine hochgeladenen Schriften nach dem Neuladen weg?

Weil die Seite sie bewusst nur im Speicher hält. Ein dauerhaftes Vorhalten würde bedeuten, die Schriftdatei in den Browserspeicher zu schreiben, und ein Vorschauwerkzeug hat keinen Grund, eine Kopie einer Datei zu behalten, die Sie bereits haben. Laden Sie sie einfach erneut hoch.

Welche Formate kann ich hochladen?

TTF, OTF, WOFF und WOFF2, bis zu 20 MB pro Datei — das sind die vier Containerformate, die FontFace des Browsers akzeptiert. TrueType-Collections (.ttc) bündeln mehrere Schnitte in einer Datei und werden nicht unterstützt; exportieren Sie die einzelnen Schnitte.

Warum sehen manche Gewichte falsch oder zu fett aus?

Enthält eine Familie das angeforderte Gewicht nicht, synthetisiert der Browser es: unechtes Fett verdickt die Konturen, unechtes Kursiv kippt sie. Wirkt nur die 600 verschmiert, während 400 und 700 stimmen, liefert die Familie schlicht keine 600.

Kann ich damit herausfinden, was meine Besucher installiert haben?

Nein, und keine Website kann das. Das Auflisten verlangt einen ausdrücklichen Erlaubnisdialog auf dem Gerät des Besuchers, eine Seite kann fremde Schriften also niemals unbemerkt inventarisieren. Die Liste hier beschreibt ausschließlich dieses Gerät — genau deshalb gehört ein Rückfallstapel ins Produktions-CSS.

Was trage ich in die src-URL von @font-face ein?

Den Pfad, unter dem Ihr eigener Build die Schriftdatei ausliefert — etwa /fonts/AuroraSans.woff2. Das format()-Schlüsselwort wird aus der Dateiendung korrekt erzeugt, Sie müssen also nur die URL ersetzen.