Seznam všech fontů prohledá libovolnou webovou stránku a představí kompletní inventář každé rodiny fontů v použití — webové fonty načtené z CDN, lokálně hostované fonty a záložní systémové fonty. Každý font zobrazuje živý textový náhled, načtené tloušťky a styly, počet elementů, které ho používají, a kopírování CSS deklarace font-family jedním kliknutím.
Identifikace fontů na webové stránce, kterou obdivujete, dříve vyžadovala kontrolu elementů jeden po druhém v DevTools, kontrolu vypočítané vlastnosti font-family nebo použití rozšíření prohlížeče, která detekují vždy jen jeden font. Seznam všech fontů vám dá kompletní obrázek v jednom pohledu — každý font načtený a použitý na stránce s živými textovými ukázkami přesně ukazujícími, jak se každý font vykresluje. Nástroj rozlišuje mezi webovými fonty (načtené přes @font-face nebo Google Fonts) a systémovými fonty (Arial, Helvetica, Georgia atd.) a zobrazuje kompletní zásobník font-family. Pro každý font vidíte, které tloušťky jsou načteny (400, 600, 700), které elementy ho používají a jaké velikosti fontů jsou aplikovány. Kliknutím na libovolný font zkopírujete jeho CSS deklaraci — připravenou k vložení do vlastního projektu. Živý náhled používá skutečné vykreslení fontu ze stránky, nikoli generický náhled, takže přesně vidíte, jak font vypadá při velikostech a tloušťkách použitých na stránce.
Uvádí každou rodinu fontů skutečně vykreslených na stránce, včetně webových fontů z Google Fonts, Adobe Fonts nebo vlastních deklarací @font-face a záložních systémových fontů. Zobrazuje celkový počet nalezených jedinečných rodin fontů.
Každý font je zobrazen s živou textovou ukázkou (Příliš žluťoučký kůň úpěl ďábelské ódy) vykreslenou pomocí skutečného souboru fontů načteného na stránce. Vidíte skutečné vykreslení — nikoli generický náhled.
Pro každý font vidíte, které tloušťky jsou načteny (Regular 400, Medium 500, SemiBold 600, Bold 700) a zda jsou dostupné varianty kurzívy. Pomáhá pochopit načtenou podmnožinu fontu.
Podívejte se, kolik elementů na stránce každý font používá. Nejpoužívanější font je uveden jako první. Poznejte, které fonty jsou primární (tělo textu) a které jsou sekundární (použité jen na několika elementech).
Kliknutím na libovolnou položku fontu zkopírujete kompletní CSS deklaraci font-family (např. font-family: 'Inter', sans-serif) do schránky. Připravena k přímému vložení do stylopisu.
Každý font zobrazuje svůj zdroj: Google Fonts (s konkrétní URL), Adobe Fonts, lokálně hostovaný (s URL @font-face) nebo systémový font. Přesně víte, odkud každý font pochází.
Navštivte webovou stránku s krásnou typografií a okamžitě uvidíte každý font, který používá — názvy, tloušťky a odkud pocházejí. Žádné další hádání který font to je nebo používání nespolehlivých nástrojů pro identifikaci fontů.
Kolik fontů načítá vaše stránka? Jsou tam nepoužívané fonty, které se stahují, ale nepoužívají? Seznam všech fontů zobrazuje skutečné použití — pokud má načtený font 0 elementů, které ho používají, je to zbytečná šířka pásma.
Dokumentujte typografii projektu spuštěním Seznamu všech fontů na každé stránce. Ověřte, že správné fonty a tloušťky jsou konzistentně používány napříč stránkou — zachyťte nesprávné deklarace font-family.
Identifikovali jste font, který se vám líbí, ale je placený? Zkopírujte název fontu a hledejte bezplatné alternativy s podobnými charakteristikami. Živý náhled vám pomůže přesně si vybavit, jak vypadal.
Spusťte Seznam všech fontů na stejné stránce v různých prohlížečích pro ověření, že stejné fonty jsou vykresleny všude. Zásobníky systémových fontů se liší napříč operačními systémy — zachyťte nekonzistence.
Otevřete plovoucí dok DevSuite Pro a klikněte na ikonu Seznamu všech fontů. Nástroj prohledá vypočítané styly stránky a pravidla @font-face.
Panel zobrazuje všechny fonty nalezené na stránce, seřazené podle frekvence použití. Každá položka zobrazuje název fontu, text náhledu, tloušťky a počet elementů.
Procházejte živé náhledy pro zobrazení vykreslení každého fontu. Porovnejte font nadpisů stránky vs font těla textu vs akcentový font.
Kliknutím na libovolnou položku fontu zkopírujete CSS deklaraci font-family. Kliknutím na zdrojový odkaz navštívíte původ fontu (stránka Google Fonts, CDN URL atd.).
Vložte deklaraci font-family do CSS a načtěte font ze stejného zdroje pro použití ve vlastním projektu.
Nainstalujte si DevSuite Pro zdarma a odemkněte 39+ vývojářských nástrojů pro svůj prohlížeč.
