Familie und geladene Stärken
Wissen, welche Varianten Sie brauchen, nicht nur den Namen
Typografie
Welche Schrift eine Website nutzt – mit Lizenz und Skala
Smart Design Inspector zeigt, welche Schriften eine Website nutzt, ihre Schriftstärken, woher sie geladen werden (Google Fonts, Adobe Fonts oder der eigene Server), ihre Lizenz und die Schriftskala der Seite: jeden Stil mit Größe, Stärke und Zeilenhöhe.
Schriften, Herkunft, Lizenz und Skala: für immer kostenlos
Schriften · ihrkunde.example
- Inter300 · 400 · 500 · 600Google FontsOFL
- Playfair Display400 · 400 kursiv · 700Google FontsOFL
- JetBrains Mono400Selbst gehostetOFL
- H164 px · 500 · 1,04
- H236 px · 500 · 1,1
- H317 px · 500 · 1,3
- Text16 px · 300 · 1,55
- Button15 px · 500 · 1
01
So finden Sie heraus, welche Schrift eine Website nutzt
3 Schritte- 01
Installieren Sie Smart Design Inspector und öffnen Sie die Website.
- 02
Klicken Sie auf das Symbol und wählen Sie Schriften.
- 03
Sie sehen die Liste der Familien mit ihren Stärken und ihrer Herkunft. Fahren Sie mit der Maus über einen Text, um seinen genauen Stil zu sehen.
Ohne Erweiterung
Es geht auch ohne Erweiterung: Rechtsklick auf den Text, Untersuchen und im Styles-Panel nach font-family suchen. Das Problem: font-family nennt die angeforderte Schrift, aber nicht, ob sie geladen wurde, woher sie kommt oder welche Lizenz sie hat.
02
Probieren Sie es auf dieser Seite
Ohne InstallationEine Beispiel-Website und das Schriften-Panel, ohne etwas zu installieren. Fahren Sie mit der Maus über einen Text oder wählen Sie ihn in der Liste: Sie sehen Familie, Stärke, Größe, Zeilenhöhe, Herkunft und Lizenz.
Element wählen
Smart Design Inspector · Schriftenh1.hero-title
- Familie
- —
- Stärke
- —
- Stil
- —
- Größe
- —
- Zeilenhöhe
- —
- Laufweite
- —
- Herkunft
- —
- Lizenz
- —
Familien auf der Seite
—
Beispiel-Website · die Werte werden von dieser Seite gelesen
03
Mehr als der Name der Schrift
4 AngabenHerkunft: Google Fonts, Adobe Fonts oder selbst gehostet
Wissen, ob Sie sie kostenlos nutzen dürfen oder kaufen müssen
Lizenz
Google Fonts stehen unter OFL. Bei allen anderen wird die Lizenz gelesen, die die Schriftdatei selbst angibt
Schriftskala
H1 bis H6, Fließtext und Buttons mit Größe, Stärke, Zeilenhöhe und Laufweite
Die Skala brauchen Sie, um den Stil nachzubauen – Schrift-Erweiterungen schauen nur Buchstabe für Buchstabe. Mit Pro exportieren Sie sie nach Tailwind oder in CSS-Variablen: Designsystem extrahieren.
| Kostenlos0 €für immer | Pro49 €Einmalzahlung | |
|---|---|---|
| Schriften der Seite: Familie, Stärken, Größen, Herkunft und Lizenz | ||
| Schriftskala: jeder Textstil mit Schrift, Größe, Stärke, Zeilenhöhe und Laufweite | ||
| Textstile nach Tailwind v4 @theme, in CSS-Variablen oder DESIGN_SPECS.md exportieren | — | Vorabzugang kostenlos |
05
Was es nicht kann
GrenzenEs lädt keine kostenpflichtigen Schriften herunter. Es zeigt Ihnen die Lizenz und wo Sie sie bekommen. Steht die Schrift unter einer freien Lizenz, können Sie sie herunterladen. Schriften auf Bildern erkennt es ebenfalls nicht – dafür gibt es Tools wie WhatTheFont.
Ist es kostenlos?
Ja. Schriften, Herkunft, Lizenz und Skala ansehen ist für immer kostenlos.
Erkennt es Schriften von Adobe Fonts?
Ja. Es erkennt Schriften, die von Adobe geladen werden, an der Adresse, von der sie kommen.
Und wenn die Website eine Systemschrift nutzt?
Die Erweiterung zeigt an, dass keine Webschrift geladen wird, und nennt die angegebene Familie.
Darf ich die gefundene Schrift verwenden?
Das hängt von ihrer Lizenz ab. Google Fonts dürfen in jedem Projekt verwendet werden. Kommerzielle Schriften müssen Sie kaufen, auch wenn eine andere Website sie nutzt.
Funktioniert es mit Text in Bildern?
Nein. Es liest den Text der Seite, nicht den Text in einem Bild.
In welchen Browsern und auf welchen Systemen läuft sie?
In Chrome, Edge, Brave, Arc, Opera und Vivaldi, unter Windows, Mac und Linux, ab Version 1.0. Sie läuft überall gleich, weil der Browser die Erweiterung ausführt, nicht das Betriebssystem. Der Code ist so vorbereitet, dass sie ohne Neuschreiben auf Firefox und Safari kommen kann. Während der Entwicklung kann sich noch etwas ändern.
07
Weiter mit
Verwandte FunktionenFarben
Die Palette der Seite, eine Pipette und der WCAG-Kontrast jedes Text-Hintergrund-Paars.
Farben einer Website →Designsystem
Farben, Abstände und Typografie nach Tailwind v4 @theme, in CSS-Variablen oder DESIGN_SPECS.md.
Designsystem extrahieren →CSS-Inspektor
Fahren Sie mit der Maus darüber und sehen Sie berechnetes CSS, Box, Margins und Abstände.
CSS-Inspektor →Warteliste
Gehören Sie zu den Ersten, die es testen
Smart Design Inspector ist in Entwicklung. Hinterlassen Sie Ihre E-Mail-Adresse, und wir benachrichtigen Sie am Tag der Veröffentlichung im Chrome Web Store – mit den 7 Pro-Funktionen kostenlos im Vorabzugang.
Eine E-Mail am Starttag und nur wenige weitere · Abmeldung mit einem Klick