Schriftart mit Chrome & Firefox DevTools finden

Browser-DevTools zeigen die exakt gerenderte Schrift eines Elements. So funktioniert es - und wann der URL-Scanner die schnellere Wahl ist.

Chrome DevTools - Gerenderte Schriften

  1. 1Text auf der Seite rechtsklicken und Untersuchen wählen (oder Strg+Umschalt+I / Cmd+Option+I drücken).
    Chrome-Kontextmenü mit hervorgehobenem Eintrag Untersuchen
    Vollständigen Screenshot anzeigen
    Rechtsklick auf Text, dann Untersuchen wählen
  2. 2Chrome öffnet das Elements-Panel und markiert das angeklickte Element direkt im DOM-Baum.
  3. 3Im rechten Panel den Tab Berechnet (Computed) öffnen - der zweite Tab neben Stile (Styles).
  4. 4Unter den CSS-Eigenschaften zum Abschnitt Gerenderte Schriften (Rendered Fonts) scrollen.
    Chrome DevTools Computed-Tab mit Abschnitt Gerenderte Schriften: Inter Variable aus einer woff2-Datei
    Vollständigen Screenshot anzeigen
    Computed-Tab - zu "Gerenderte Schriften" scrollen
  5. 5Dort steht, welche Schrift der Browser tatsächlich verwendet hat, aus welcher Quelldatei und wie viele Zeichen daraus gerendert wurden.

Firefox DevTools - Schriften-Tab

  1. 1Text rechtsklicken und Element untersuchen wählen (oder F12 drücken). Der Inspector öffnet sich.
  2. 2Im rechten Panel des Inspectors (wo sonst Regeln und Berechnet stehen) den Tab Schriften öffnen.
  3. 3Die linke Spalte listet alle Schriften der Seite. Einen Schriftnamen anklicken, um Vorschau, Gewichtsbereich, Format und Quelldatei zu sehen.
    Firefox DevTools Schriften-Tab - Inter Variable ausgewählt mit Vorschau und Details
    Vollständigen Screenshot anzeigen
    Firefox Schriften-Tab - alle Seitenschriften links, Details rechts

Grenzen des DevTools-Ansatzes

DevTools ist gut für einzelne Elemente, liefert aber keine vollständige Übersicht aller Schriften einer Seite. Dafür müsste jedes Textelement manuell angeklickt werden. Für ein vollständiges Audit - einfach die URL unten eingeben.

Schneller: Ganze Seite per URL scannen

URL eingeben und alle Web-Schriften auf einen Blick - jede @font-face-Regel, Google-Fonts-Import und CDN-Link in einem Scan.

Häufige Fragen

Was sind "Gerenderte Schriften" in Chrome?

Gerenderte Schriften zeigt die tatsächlich verwendete Schrift nach Auflösung aller font-family-Fallbacks - unabhängig davon, was im CSS steht.

Warum weicht die gerenderte Schrift von font-family ab?

font-family ist eine priorisierte Fallback-Liste. Schlägt die erste Schrift fehl (fehlende Datei, CORS-Fehler), greift der Browser auf die nächste zurück. Gerenderte Schriften zeigt, was tatsächlich verwendet wurde.

Kann ich alle Schriften einer Seite mit DevTools finden?

Der Firefox-Schriften-Tab listet alle Schriften der Seite. Chrome erfordert elementweises Prüfen. Für eine vollständige Inventur den URL-Scanner oben nutzen.

Erkennt der URL-Scanner auch Google Fonts?

Ja - alle Schriftquellen werden erkannt: Google Fonts, Bunny Fonts, Fontshare und selbst gehostete @font-face-Schriften.

Zurück zum Font-Checker