Darmowe narzędzie, bez rejestracji

Jakiej czcionki używa ta strona?

Wklej URL, aby zobaczyć fonty używane przez stronę, z grubościami, rozmiarami i miejscami, w których występują. Za darmo, bez rejestracji. Zobacz gotowe przykłady, takie jak fonty Anthropic i fonty Airbnb, albo sprawdź, co dodaje DESIGN.md.

Wypróbuj

Użyj tych fontów w swoim kodzie

Wyszukiwarka podaje nazwy rodzin, ich grubości i miejsca, w których składają tekst. Aby ich użyć, wczytaj każdą rodzinę raz, nadaj każdej roli zmienną CSS i zawsze kończ stos fontami zastępczymi, aby tekst renderował się, gdy font się pobiera lub gdy nie uda się go wczytać.

1. Wczytaj font. Dla rodziny z Google Fonts dodaj jej tag <link> albo użyj next/font/google i pobieraj tylko grubości wskazane przez wyszukiwarkę. Dla fontu komercyjnego kup licencję webową od odlewni i serwuj jego pliki przez @font-face.

2. Nazwij role. Jedna zmienna na zadanie: display dla nagłówków, body dla tekstu ciągłego, mono dla kodu. Podmień nazwy rodzin na te, które udało ci się znaleźć.

:root {
  --font-display: "Inter Display", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; }
body { font-family: var(--font-body); font-weight: 400; }
code, pre { font-family: var(--font-mono); }

3. Użyj ich w Tailwind. Te same stosy stają się klasami font-display, font-sans i font-mono.

/* app.css, Tailwind CSS v4 */
@theme {
  --font-display: "Inter Display", "Inter", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

Rodziny fontów to połowa systemu typograficznego. Rozmiary, interlinia i odstępy między literami każdego poziomu są w sekcji typografii pliku DESIGN.md, który twój agent AI do kodowania zastosuje na każdym ekranie.

FAQ

Pytania o wyszukiwarkę fontów

Krótkie odpowiedzi o darmowym narzędziu: Wyszukiwarka fontów.

Otwiera stronę w prawdziwej przeglądarce i odczytuje obliczony font każdego widocznego fragmentu tekstu: rodzinę, którą przeglądarka faktycznie wyrenderowała, wraz z grubością i rozmiarem. Rodziny są potem grupowane i szeregowane według tego, ile tekstu składają.

Nie. Fonty to licencjonowane oprogramowanie, a licencja strony zwykle obejmuje tylko tę stronę. Jeśli rodzina jest w Google Fonts, pobierzesz ją tam za darmo; w przeciwnym razie znajdź jej odlewnię i kup licencję na własny użytek.

Narzędzie czyta jedną wpisaną stronę i wymienia do ośmiu rodzin. Widzi tylko tekst, który ta strona pokazuje nowemu odwiedzającemu: tekst za logowaniem, strony blokujące zautomatyzowane przeglądarki oraz napisy rysowane jako obrazy lub SVG nie są odczytywane, więc ich fonty się nie pojawią.

Tak. Wykrywany jest każdy font webowy renderowany przez stronę, niezależnie od tego, czy pochodzi z Google Fonts, Adobe Fonts czy z serwerów samej strony. Fonty Google są pokazywane w swoim prawdziwym kroju; pozostałe w foncie zastępczym.

Tak, element po elemencie. W Chrome lub Edge kliknij tekst prawym przyciskiem, wybierz „Zbadaj” (Inspect) i przewiń kartę Computed do sekcji Rendered Fonts, która podaje faktycznie narysowany font. W Firefox panel Fonts w narzędziu Inspector wymienia fonty zaznaczonego elementu i każdy font wczytany przez stronę.

To narzędzie wymienia tylko fonty. DESIGN.md z Design Extractor obejmuje kolory, pełną skalę typograficzną, odstępy i zasady komponentów strony, w jednym pliku, którym może kierować się twój agent AI do kodowania.

Więcej darmowych narzędzi

Zobacz wszystkie darmowe narzędzia

  • Walidator DESIGN.md

    Wklej DESIGN.md, aby sprawdzić jego strukturę i tokeny oraz zobaczyć podgląd, prosto w przeglądarce.

    Otwórz: Walidator DESIGN.md

Potrzebujesz całego design systemu?

Wygeneruj DESIGN.md z kolorami, skalą typograficzną, odstępami i komponentami dowolnej strony, gotowy dla twojego agenta AI do kodowania.

Wygeneruj DESIGN.md