FontLens

Kostenlose Erweiterung für Chrome

Welche Schrift ist das? Rechtsklick und CSS sehen

Wähle Text auf einer Webseite aus, klicke mit rechts und wähle „Inspect font with FontLens“. Der Schrift-Inspector öffnet sich über der Seite und zeigt Familie, Größe, Stärke, Zeilenhöhe und Farbe, kopierfertiges CSS sowie eine Schaltfläche zum Herunterladen der Schrift.

Zu Chrome hinzufügen – kostenlos

Funktioniert auch in Edge, Brave, Opera und anderen Chromium-Browsern.

Der FontLens-Inspector: das Muster Ag zwischen Versalhöhe-, x-Höhe- und Grundlinienmarkierungen, Schrifteigenschaften und ein Tailwind-Ausschnitt

Auf einen Blick

Was es tut
Zeigt die Schrift des ausgewählten Textes: Familie, Größe, Stärke, Zeilenhöhe, Farbe und weitere Abweichungen vom Standardstil – mit kopierfertigem CSS.
So startest du
Text auswählen, rechtsklicken und „Inspect font with FontLens“ wählen. Der Menüpunkt erscheint nur, wenn Text ausgewählt ist.
Kopieren als
CSS, SCSS, SASS oder Tailwind, mit Größenangabe in px, rem, pt oder em.
Schriftdatei
„Download font“ ruft die Webschrift von ihrer @font-face-Quelle ab. Prüfe die Lizenz, bevor du die Schrift verwendest.
Für wen
Webdesigner, Frontend-Entwickler, Barrierefreiheitsprüfer und alle, die CSS lernen.
Preis
Kostenlos. Kein Konto, keine Bezahlversion.
Daten
Läuft in deinem Browser. Keine Server, keine Analysen. Die einzige Anfrage ist der von dir gestartete Schrift-Download.
Funktioniert in
Chrome und anderen Chromium-Browsern, die Erweiterungen aus dem Chrome Web Store installieren. Nicht in Firefox oder Safari.
Grenzen
Liest CSS von echtem Text auf Webseiten. Kein Text in Bildern, Canvas oder PDFs und nicht auf Chrome-eigenen Seiten.
Version
2.2.0, aktualisiert 23. Oktober 2026

Zwei Klicks zur Schrift

  1. 1

    Text auswählen

    Eine Überschrift, ein Absatz oder eine Schaltflächenbeschriftung auf einer Webseite.

  2. 2

    Rechtsklicken

    „Inspect font with FontLens“ wählen. Der Inspector öffnet sich über der Seite und zeigt Familie, Größe, Stärke, Zeilenhöhe und Farbe.

  3. 3

    Kopieren oder anpassen

    Kopiere CSS oder Tailwind, teste Größe und Farbe in der Live-Vorschau oder lade die Schriftdatei herunter.

Dafür wird es genutzt

Aa

Schrift benennen

Eine Überschrift gefällt dir? Wähle sie aus und sieh Familie, Stärke und Herkunft der Schrift: Google Fonts, Adobe Fonts oder die Website selbst.

{ }

Mit einem Mock-up abgleichen

Vergleiche die Werte auf der Live-Seite mit der Designdatei und kopiere die Regeln als CSS, SCSS, SASS oder Tailwind.

4.5:1

Kontrast prüfen

Sieh das Kontrastverhältnis samt AA- und AAA-Kennzeichnung und teste dunkleren Text oder einen helleren Hintergrund, bevor das Design live geht.

Was es tut

  • Muster mit Hilfslinien

    Die erste Schriftfamilie des Stacks, dargestellt zwischen Versalhöhe, x-Höhe und Grundlinie, gemessen direkt an der Schriftdatei.

  • Snippet-Formate

    CSS, SCSS, SASS und Tailwind. Kopiere den ganzen Ausschnitt oder eine Zeile; dein letztes Format bleibt gespeichert.

  • Deine Einheiten

    Zeige Größen in px, rem, pt oder em – in den Feldern und im Snippet. rem richtet sich nach der Root-Größe der Seite.

  • Schriftquelle

    Ein Symbol zeigt die Herkunft der Schrift: Google Fonts, Adobe Fonts, selbst gehostet oder eine Systemschrift auf deinem Computer.

  • Kontrastprüfung

    Verhältnis zwischen Text und Hintergrund mit AA- und AAA-Kennzeichnung für normalen und großen Text; aktualisiert sich beim Ändern der Farben.

  • „Download font“

    Lädt die Datei von der @font-face-Quelle herunter und benennt sie nach der Familie. Blockiert der Server den Abruf, öffnet sich die Quelle in einem neuen Tab.

Warum DevTools bei „Welche Schrift?“ so lange dauert

Eine Seite legt mehrere Schriften fest, und der Browser verwendet die erste verfügbare. Um herauszufinden, welche das ist, öffnest du DevTools, suchst das Element, liest den Bereich Computed und suchst dann im Bereich Network nach der Schriftdatei. Größe, Stärke, Zeilenhöhe und Farbe stehen an verschiedenen Stellen.

FontLens liest den berechneten Stil des ausgewählten Textes und zeigt alles in einem Bereich: den Schriftfamilien-Stack, ein Muster der ersten Familie, die Werte, die Herkunft der Schrift und das CSS. Da FontLens das CSS der Seite liest, kann es keine Schrift in einem Bild benennen.

Nichts verlässt deinen Browser

  • Kein Konto, keine Server

    FontLens läuft in deinem Browser. Keine Analysen, kein Tracking.

  • Liest deine Auswahl

    Der Inspector liest die Stile des Textes, auf den du rechtsgeklickt hast. Es werden keine Seiteninformationen übertragen.

  • Vier Berechtigungen

    Kontextmenü für den Rechtsklick-Menüpunkt, aktiver Tab und Seitenzugriff zum Öffnen des Inspectors sowie Speicher für Beispieltext, Einheit und Snippet-Format.

Chrome DevTools vs. FontLens

Chrome DevTools vs. FontLensChrome DevToolsFontLens
Schrift eines Textes findenElement untersuchen und im Bereich Computed suchenText auswählen, rechtsklicken, Menüpunkt wählen
Als Tailwind oder SCSS kopierenNein, Werte einzeln kopierenCSS-, SCSS-, SASS- oder Tailwind-Tab
Herkunft der SchriftIm Bereich Network nach der Schriftdatei suchenHinweis: Google Fonts, Adobe Fonts, selbst gehostet oder System
Schriftdatei herunterladenIn Network oder Sources suchen und speichernEine Schaltfläche
Kontrast prüfenIm Farbwähler des Bereichs StylesAA- und AAA-Kennzeichnung neben einer Live-Vorschau
PreisIntegriertKostenlos

Fragen

Wie finde ich heraus, welche Schriftart eine Website verwendet?

Füge FontLens zu Chrome hinzu, wähle Text auf der Website aus, klicke mit rechts und wähle „Inspect font with FontLens“. Du siehst Schriftfamilie, Größe, Stärke, Zeilenhöhe, Farbe und Herkunft der Schrift.

Wie kopiere ich das CSS einer Schrift von einer Website?

Wähle im Inspector den CSS-, SCSS-, SASS- oder Tailwind-Tab und klicke auf „Copy all“ oder kopiere eine einzelne Zeile. Ändere vorher bei Bedarf die Einheit zu px, rem, pt oder em.

Kann ich eine Schrift von einer Website herunterladen?

Wenn der Text eine Webschrift verwendet, ruft „Download font“ die Datei von ihrer @font-face-Quelle ab. Für Systemschriften gibt es nichts herunterzuladen. Prüfe die Lizenz, bevor du die Schrift in deinem Projekt verwendest.

Kann FontLens eine Schrift in einem Bild oder PDF erkennen?

Nein. FontLens liest CSS von echtem Text auf Webseiten und kann daher keine Schriften in Bildern, Canvas oder PDFs benennen.

Wie prüfe ich den Textkontrast nach WCAG?

Die Vorschau zeigt das Kontrastverhältnis zwischen Textfarbe und Hintergrund samt AA- und AAA-Kennzeichnung für normalen und großen Text. Ändere eine der Farben, und die Kennzeichnungen werden aktualisiert.

Kann ich Größen in rem statt px anzeigen?

Ja. Wechsle zu px, rem, pt oder em; Felder und Snippet passen sich an. rem wird anhand der Root-Schriftgröße der Seite berechnet, und deine Auswahl bleibt gespeichert.

Ist die Erweiterung kostenlos? Werden Daten erfasst?

Sie ist kostenlos und benötigt kein Konto. Es gibt keine Server und keine Analysen. Die einzige Anfrage ist der von dir gestartete Schrift-Download.

Funktioniert es in Edge, Brave oder Opera?

Die meisten Chromium-Browser können Erweiterungen aus dem Chrome Web Store installieren, darunter Edge, Brave, Opera und Vivaldi. Firefox und Safari werden nicht unterstützt.

Weitere kostenlose Erweiterungen von PYROCTAL

Welche Schrift ist das? In zwei Klicks.

Zu Chrome hinzufügen – kostenlos