Zdarzyło się to Państwu: przeglądają Państwo stronę i nagle, stop. Krój w nagłówku jest tak piękny, że już w myślach zastanawiają się Państwo, jak wyglądałby w Państwa projekcie. Ale jak się nazywa? Właściciel witryny nie odpowiedział, w kodzie źródłowym jest zaciemniony CSS, a googlanie „piękna szeryfowa czcionka z dziwnym G" może trwać do rana.

Projektanci wpadają w tę pułapkę bez przerwy. Przebieranie w gigabajtach kolekcji w nadziei na trafienie to loteria. A co, jeśli tego kroju w ogóle tam nie ma?

Na szczęście rok 2026 daje zestaw narzędzi, które rozwiązują problem w kilka sekund. Jedne działają na podstawie wgranego obrazu, inne bezpośrednio na żywej stronie. Rozkładamy na czynniki pierwsze 9 sposobów na identyfikację kroju pisma: od klasycznych serwisów po bookmarklety ważące zero megabajtów.

💡 Szybki przegląd:

• Wgrywają Państwo zrzut ekranu z tekstem do WhatTheFont lub WhatFontIs i otrzymują nazwę kroju (często z darmowym odpowiednikiem).
• Instalują Państwo rozszerzenie Fonts Ninja lub WhatFont, najeżdżają kursorem na tekst na stronie i widzą nazwę, rozmiar, interlinię oraz kolor.
• Nie mają Państwo nawet zrzutu ekranu, otwierają Identifont, odpowiadają na 5-10 pytań o kształt liter i otrzymują dopasowanie.
• Znaleźli Państwo krój, wgrywają go na stronę przez CSS @font-face (lub wtyczkę do WordPress) i korzystają.

Serwisy online: identyfikujemy krój pisma na podstawie wgranego obrazu

Te cztery narzędzia działają na jednej zasadzie: dają im Państwo obraz z tekstem, a one przepuszczają go przez bazę setek tysięcy krojów i zwracają dopasowania.

1. WhatTheFont, złoty standard od MyFonts

WhatTheFont od MyFonts to najdokładniejszy identyfikator krojów pisma w 2026 roku. Pod maską kryje się głębokie uczenie na bazie ponad 233 000 stylów fontów. Wgrywają Państwo obraz, klikają na tekst, otrzymują listę dopasowań. Baza jest przesunięta w stronę krojów komercyjnych, ale prawie zawsze proponuje też darmowe alternatywy.

Plusy: doskonała dokładność na standardowych krojach, aplikacja mobilna na iOS i Androida, nie wymaga rejestracji. Minusy: słaby przy pismach odręcznych i mocno stylizowanych, wbudowany kadrownik czasem obcina elementy wystające.

🔗 WhatTheFont na MyFonts

2. WhatFontIs, największa baza (ponad 900 000 krojów)

WhatFontIs ma największą bazę, ponad 900 000 krojów pisma. Proszę go uruchomić jako drugi, jeśli WhatTheFont nie dał pewnego wyniku.

Główna zaleta: automatyczne dobieranie darmowych odpowiedników z Google Fonts do płatnych dopasowań. Dla budżetu projektu internetowego to godzina zaoszczędzonego czasu.

Plusy: największy indeks, podpowiedzi darmowych alternatyw, rozszerzenie do przeglądarki. Minusy: darmowa wersja jest zapchana reklamami, trzeba ręcznie oznaczyć znaki przed wyszukiwaniem.

🔗 WhatFontIs

3. Fontspring Matcherator, precyzja w OpenType

Fontspring Matcherator to faworyt projektantów pracujących z niezależnymi odlewniami czcionek. W przeciwieństwie do WhatTheFont (katalog MyFonts), Matcherator obejmuje fonty indie, wykrywa funkcje OpenType (ligatury, glify alternatywne) i obsługuje przeciąganie i upuszczanie.

Plusy: bezpłatny, mocny w fontach webowych, porównywanie dopasowań obok siebie. Minusy: baza mniejsza niż MyFonts, wrażliwy na jakość obrazu.

🔗 Fontspring Matcherator

4. Font Squirrel, darmowe fonty i zero reklam

Font Squirrel zdobył reputację dzięki selekcjonowaniu darmowych fontów do użytku komercyjnego. Jego Matcherator jest najbardziej minimalistyczny: wgrywa Pan/Pani obraz, przycina, dostaje wynik. Żadnych reklam, żadnych wyskakujących okienek. Koronna funkcja to obracanie obrazu: jeśli font jest pod kątem, Font Squirrel radzi sobie tam, gdzie inne zawodzą.

Plusy: najczystszy interfejs, wolne fonty, szybkie wyniki. Minusy: baza zbyt mała, fontów komercyjnych prawie nie znajduje.

🔗 Font Squirrel Matcherator

Rozszerzenia przeglądarki: poznajemy font bezpośrednio na stronie

Serwisy online są dobre do obrazów. Ale jeśli font ma Pan/Pani przed sobą właśnie teraz, na żywej stronie internetowej, rozszerzenia przeglądarki dają odpowiedź w sekundę. Żadnych zrzutów ekranu, żadnych nowych kart.

5. Fonts Ninja, wypróbować, kupić, pobrać

Fonts Ninja (wcześniej FontFaceNinja), bezkonkurencyjny lider wśród przeglądarkowych identyfikatorów fontów. Rozszerzenie dostępne dla Chrome, Firefox, Safari i Edge.

Najedzie Pan kursorem na tekst, widzi Pan nazwę fontu, rozmiar, wysokość wiersza, kolor i odstępy między literami. Ale najważniejsze: Fonts Ninja pozwala wypróbować font, wpisuje Pan własny tekst i widzi go w czasie rzeczywistym właśnie tym fontem. A jeśli się spodoba, od razu pobiera Pan darmową wersję lub przechodzi do zakupu komercyjnej.

Bonus: przycisk-maska, który ukrywa wszystkie reklamy i obrazy na stronie, pozostawiając wyłącznie typografię w czystej postaci. Dla projektanta oceniającego skład jest to bezcenne.

Plusy: pełen zestaw, identyfikacja, testowanie, pobieranie; działa w 4 przeglądarkach. Minusy: do zaawansowanych filtrów (kształt liter, typ licencji) wymagana jest rejestracja.

🔗 Fonts Ninja w Chrome Web Store

6. WhatFont, najechać i dowiedzieć się wszystkiego

WhatFont, rozszerzenie polecane przez Wired i ulubione przez web developerów za prostotę. Dostępne dla Chrome i Firefox.

Najedzie Pan kursorem, wyskakuje nazwa fontu. Kliknie Pan, otrzymuje pełną mapę właściwości CSS: rodzinę, grubość, rozmiar, wysokość wiersza, kolor w HEX. To nie tylko identyfikator, to inspektor typografii. Jeśli font pochodzi z katalogu Google Fonts, WhatFont podaje bezpośredni link do pobrania.

Plusy: natychmiastowy wynik, głęboka analiza CSS, linki do Google Fonts. Minusy: nie identyfikuje fontów na obrazach (tylko żywy tekst na stronie), nie pozwala wypróbować fontu własnym tekstem.

🔗 WhatFont w Chrome Web Store

7. Typ.io, pary fontowe i inspiracja

Typ.io rozwiązuje problem o krok dalej: nie wystarczy rozpoznać font, chce Pan zrozumieć, z czym go łączyć. Po zainstalowaniu rozszerzenia w rogu przeglądarki pojawia się przycisk „T". Naciśnie go Pan i widzi wszystkie fonty na stronie w formie osobnej listy. Kliknie Pan nazwę, przechodzi do karty fontu z przykładami par: „ten font jest używany razem z..."

Sama strona Typ.io to baza rzeczywistych rozwiązań projektowych: społeczność przesyła zrzuty ekranu stron z analizą kombinacji fontowych. Dla tych, którzy chcą nie tylko znaleźć font, ale zrozumieć kontekst jego użycia.

Plusy: dobór par fontowych, baza rzeczywistych przykładów. Minusy: rozszerzenie pokazuje tylko nazwy fontów (bez szczegółów CSS), pełna funkcjonalność wymaga rejestracji.

🔗 Typ.io

8. Fount, bookmarklet, który nic nie waży

Fount, nie rozszerzenie, a bookmarklet. Dodaje Pan przycisk do zakładek przeglądarki, wchodzi na dowolną stronę, klika tę zakładkę, a kursor zmienia się w krzyżyk. Kliknie Pan tekst, pojawia się okienko z nazwą fontu, rozmiarem, grubością i stylem. Ponowne kliknięcie zakładki wyłącza tryb.

Idealny wybór dla tych, którzy nie chcą zaśmiecać przeglądarki rozszerzeniami. Działa w Safari, Chrome, Firefox i IE8+. Nie wymaga aktualizacji, nie zbiera danych, nie używa procesów w tle. Po prostu działa.

Plusy: superlekki, wieloplatformowy, niczego się nie instaluje. Minusy: identyfikuje tylko to, co faktycznie wyrenderowało się w font-stack (a nie to, co założono w CSS), brak szczegółów takich jak kolor.

🔗 Fount, dodać bookmarklet

Szczególna metoda: gdy nie ma ani obrazu, ani strony

9. Identifont, określamy font na podstawie opisu

Identifont, najstarsze narzędzie w tym zestawieniu (działa od 2000 roku), ale wciąż niezastąpione. Nie przyjmuje obrazów i nie skanuje stron. Zamiast tego zadaje pytania: czy litera „Q" ma szeryfy? Czy pętle małej litery „g" są połączone? Jak wygląda znak „&"?

Odpowiada Pan/Pani na 5-10 pytań, Identifont zawęża krąg i podaje dopasowanie. Brzmi archaicznie, ale to jedyna działająca metoda, gdy nie ma Pan/Pani ani zrzutu ekranu, ani adresu URL, a jedynie wspomnienie tego, jak font wyglądał.

Zalety: działa całkowicie bez obrazu, ćwiczy typograficzną spostrzegawczość. Wady: działa wolno (ponad 5 minut na wyszukiwanie), wygląd strony nie był aktualizowany od dekad, baza ustępuje nowoczesnym serwisom.

🔗 Identifont

Tabela porównawcza: co wybrać

Nie ma jednego idealnego narzędzia. Schemat profesjonalisty: wrzuca Pan obraz do WhatTheFont, drugim przebiegiem do Fontspring Matcherator i patrzy na część wspólną. Która nazwa się powtarza, ta jest prawdziwa.

Jak załadować znaleziony font na stronę

Określił Pan font, pobrał plik, teraz trzeba go dodać na stronę. Najbardziej uniwersalna metoda: @font-face.

Krok 1. Proszę pobrać font w formacie .ttf lub .otf.

Krok 2. Proszę skonwertować do formatów webowych przez Font Squirrel Webfont Generator. Na wyjściu otrzyma Pan .woff, .woff2 i .ttf, a także gotowy plik CSS. WOFF2 to podstawowy format dla webu w 2026 roku, jest wspierany przez 98% przeglądarek.

Krok 3. Proszę załadować pliki fontu na serwer przez FTP lub menedżer plików hostingu, do folderu /wp-content/themes/ваша-тема/fonts/.

Krok 4. Proszę zdefiniować @font-face w CSS:

1
@font-face {
2
  font-family: 'MyCustomFont';
3
  src: url('fonts/MyCustomFont.woff2') format('woff2'),
4
       url('fonts/MyCustomFont.woff') format('woff');
5
  font-weight: 400;
6
  font-style: normal;
7
  font-display: swap;
8
}

Dyrektywa font-display: swap jest krytyczna: przeglądarka najpierw pokaże font systemowy, a gdy niestandardowy się załaduje, podmieni go. Bez niej tekst będzie niewidoczny, dopóki font się nie załaduje.

Krok 5. Proszę zastosować font do elementów:

1
h1, h2, h3 {
2
  font-family: 'MyCustomFont', sans-serif;
3
}

WordPress: wtyczka Custom Fonts daje wizualny interfejs do ładowania dowolnych fontów. Alternatywnie proszę zdefiniować @font-face w functions.php motywu potomnego przez hook wp_head.

Przed jakimikolwiek zmianami w plikach motywu proszę zrobić backup. Błąd w @font-face lub functions.php może położyć stronę.

Proszę obejrzeć krótki film, w którym pokazano cały proces, od zrzutu ekranu do gotowej nazwy fontu, z wykorzystaniem WhatTheFont:

⁉️🤔 Częste pytania

Dlaczego WhatTheFont nie znajduje mojego fontu?

Trzy główne przyczyny: słaba jakość obrazu, tekst obrócony pod kątem lub font odręczny. Proszę zrobić większy zrzut ekranu, na kontrastowym tle i poziomo. Jeśli to nie pomoże, proszę spróbować Fontspring Matcherator i WhatFontIs. Dla fontów odręcznych dokładnego dopasowania często w ogóle nie ma: są unikalne.

Czy można rozpoznać font z pliku PDF?

Tak, jeśli tekst nie jest zrasteryzowany. Proszę otworzyć PDF, zaznaczyć tekst i zrobić zrzut ekranu. Proszę załadować go do dowolnego serwisu z pierwszej czwórki. Dla skanów wynik zależy od rozdzielczości: 150 DPI i więcej daje akceptowalną dokładność.

Font został rozpoznany, ale jest płatny. Gdzie znaleźć bezpłatny odpowiednik?

WhatFontIs automatycznie proponuje bezpłatne odpowiedniki z Google Fonts pod każdym płatnym dopasowaniem. Ręcznie: proszę wejść na fonts.google.com, wpisać nazwę znalezionego fontu i obejrzeć wizualnie podobne. Bezpłatne zamienniki: szeryfowe, Playfair Display, Lora, Merriweather; bezszeryfowe, Inter, Roboto, Manrope.

Jakiego formatu fontu używać dla webu w 2026 roku?

WOFF2 jako podstawowy, WOFF jako fallback dla starych przeglądarek. TTF i OTF w webie nie warto stosować: ważą 2-3 razy więcej bez kompresji. Generator Font Squirrel (wspomniany wyżej) konwertuje wszystko do WOFF2+WOFF jednym kliknięciem.

Co stosować w 2026 roku: podsumowujący rozkład

Dziewięć narzędzi nie oznacza, że trzeba używać wszystkich. Oto prosta macierz wyboru:

• Jest zrzut ekranu → WhatTheFont, potem Fontspring Matcherator do weryfikacji.
• Potrzebny bezpłatny odpowiednik → WhatFontIs (automatyczne dopasowanie z Google Fonts).
• Font na działającej stronie → Fonts Ninja lub WhatFont (rozszerzenie w 5 sekund).
• Nie ma nic, tylko pamięć → Identifont.
• Nie chce Pan instalować rozszerzeń → Fount (skryptozakładka w zakładkach).

A jeśli żadne narzędzie nie dało rady, proszę otworzyć DevTools (F12 → Inspect → Computed → font-family). Niewygodne, ale niezawodne. No i nikt nie odwołał subreddita r/identifythisfont: żywi projektanci podają nazwę fontu w parę minut.

Dobry font zmienia odbiór strony szybciej niż przebudowa trzech bloków. Teraz ma Pan/Pani wszystko, by znaleźć ten właściwy i zastosować go w swoim projekcie.