Czcionka to nie tylko „ładne litery". Steruje uwagą, nadaje nastrój i bezpośrednio wpływa na czytelność. Zła czcionka wypycha odwiedzającego ze strony w kilka sekund, nawet jeśli zawartość jest doskonała.

Bywa, że wchodzi Pan/Pani na stronę i widzi: tekst wygląda drogo i stylowo. Chce się zrozumieć, jaka czcionka została użyta, do własnego projektu lub po prostu z zawodowej ciekawości. Ale właściciele stron nie podpisują typografii, a niektórzy celowo zmieniają nazwy czcionek w CSS, utrudniając identyfikację.

Dobra wiadomość: sprawdzenie czcionki z dowolnej strony jest realne. Nie trzeba być web developerem ani projektantem, wystarczą trzy podejścia, które pokrywają praktycznie wszystkie scenariusze. Od wbudowanego inspektora przeglądarki po rozszerzenia na jedno kliknięcie i serwisy do identyfikacji czcionek na obrazach.

💡 Szybki przegląd:

• Otwórz DevTools (F12) i znajdź font-family na karcie Computed

• Zainstaluj Whatfont lub Fontanello i najeżdżaj kursorem na tekst

• Prześlij zrzut ekranu do Font Squirrel Matcherator lub WhatTheFont

1. Wbudowany inspektor przeglądarki

Najbardziej dostępna metoda, która nie wymaga instalowania absolutnie niczego. Każda nowoczesna przeglądarka, Chrome, Firefox, Edge, Safari, zawiera narzędzia deweloperskie (DevTools). Wśród nich inspektor, który pokazuje właściwości CSS dowolnego elementu na stronie, w tym czcionkę.

Jak otworzyć. W systemie Windows naciśnij Ctrl + Shift + I, na Macu Cmd + Shift + I. Albo kliknij prawym przyciskiem myszy na tekście i wybierz „Inspect" / „Zbadaj". Otworzy się panel DevTools.

W lewej części panelu zobaczy Pan/Pani strukturę HTML, w prawej reguły CSS. Ale najszybsza droga do czcionki wiedzie przez kartę Computed (po polsku „Obliczone"). Proszę przewinąć listę właściwości do font-family, to jest nazwa kroju pisma. Obok niej przeglądarka pokazuje konkretny plik czcionki, który jest renderowany na stronie.

Jest też alternatywna ścieżka dla tych, którzy chcą zobaczyć wszystkie czcionki strony naraz. W Chrome DevTools proszę otworzyć kartę Application → sekcja Frames → folder Fonts. Przeglądarka wyświetli listę każdego załadowanego pliku czcionki z jego adresem URL i formatem (woff2, ttf). Działa wolniej, ale pokazuje to, co jest ukryte w @font-face.

Plusy: bezpłatne, nie wymaga rozszerzeń, pokazuje dokładną nazwę czcionki i jej odmianę (weight, style, size). Minusy: trzeba wykonać kilka kliknięć, na urządzeniach mobilnych metoda nie ma zastosowania.

2. Rozszerzenia do przeglądarki

Jeśli często sprawdza Pan/Pani czcionki, rozszerzenie zaoszczędzi godziny. Zasada jest prosta: najeżdża Pan/Pani kursorem na tekst, rozszerzenie pokazuje nazwę czcionki i jej parametry CSS w dymku podpowiedzi.

2.1 Whatfont

Najpopularniejsze rozwiązanie w tej niszy. Polecane przez Wired, Lifehacker i SwissMiss. Instalacja z Chrome Web Store, jedno kliknięcie.

Po instalacji proszę kliknąć ikonę rozszerzenia w prawym górnym rogu przeglądarki, aby aktywować tryb identyfikacji. Teraz przy najechaniu na dowolny tekst Whatfont pokazuje krój pisma bezpośrednio nad kursorem. Kliknięcie w tekst rozwija pełną kartę: rodzinę, odmianę, rozmiar, interlinia i kolor.

Rozszerzenie działa również na Firefox i Safari (przez port). Bezpłatne, bez rejestracji, otwarty kod źródłowy na GitHub.

🔗 Whatfont w Chrome Web Store

2.2 Fontanello

Jeśli Whatfont pokazuje informacje po najechaniu kursorem, to Fontanello, po kliknięciu prawym przyciskiem myszy. Zaznacza Pan/Pani tekst na stronie, klika prawym przyciskiem myszy i wybiera Fontanello w menu kontekstowym. Pojawia się panel z pełnymi informacjami: nazwa fontu, grubość, rozmiar, kolor, a nawet kontrast tekstu względem tła (kryterium dostępności).

Fontanello jest dostępne dla Chrome i Firefox. Dodatkowy plus: rozszerzenie nie obciąża strony ciągłym śledzeniem, uruchamia się tylko na Pana/Pani żądanie.

🔗 Fontanello w Chrome Web Store

2.3 Fonts Ninja

Bardziej zaawansowane narzędzie z funkcją „DNA fontu", czyli własnym algorytmem analizującym pliki krojów pisma w celu uzyskania dokładniejszego wyniku. Oprócz identyfikacji fontu po najechaniu kursorem, Fonts Ninja potrafi zapisywać znalezione fonty w zakładkach i pokazywać zestawienie wszystkich krojów użytych na stronie.

Jest pewien niuans: do korzystania z zakładek i niektórych funkcji wymagana jest rejestracja. Jednak podstawowa identyfikacja fontów działa bez konta. Rozszerzenie jest płatne (dostępna jest wersja próbna), dlatego warto je rozważyć, jeśli pracuje Pan/Pani z typografią profesjonalnie.

🔗 Fonts Ninja w Chrome Web Store

3. Jak rozpoznać font na podstawie obrazu

Inspektor i rozszerzenia są bezradne, gdy font jest częścią obrazu: logo, baner, mem. Tekst na obrazie nie jest elementem HTML, a zatem nie ma właściwości CSS. W takich przypadkach istnieją wyspecjalizowane serwisy.

3.1 Font Squirrel Matcherator

Bezpłatne narzędzie od Font Squirrel, sprawdzone przez lata. Algorytm działania:

• Proszę przesłać zrzut ekranu lub fragment z tekstem do interfejsu Matcherator
• Proszę zaznaczyć obszar z literami (niebieski marker na pasku narzędzi)
• Proszę kliknąć „Matcherate It!"

Serwis przeanalizuje kształt znaków i wyświetli listę najbliższych dopasowań ze swojej bazy. Jeśli nie ma dokładnego dopasowania, zaproponuje wizualnie podobne alternatywy ze wskazaniem procentu podobieństwa. Działa nawet z fontami odręcznymi, o ile litery nie są ze sobą złączone.

🔗 Font Squirrel Matcherator

3.2 WhatTheFont od MyFonts

WhatTheFont wykorzystuje głębokie uczenie i bazę ponad 233 000 fontów. Wgrywa Pan/Pani obraz, klika na wybraną literę, a algorytm znajduje dopasowania. Główna przewaga nad Matcheratorem: WhatTheFont radzi sobie z połączonymi fontami pisanymi (connected scripts), gdzie litery przechodzą jedna w drugą. To poważne techniczne usprawnienie, którego nie mają starsze serwisy.

Dla najlepszego rezultatu proszę wgrywać poziomy tekst w dobrej rozdzielczości na kontrastowym tle.

🔗 WhatTheFont na MyFonts

Wideo: identyfikacja fontu w minutę

Krótka demonstracja, jak zainstalować rozszerzenie Identify Font i znaleźć font na dowolnej stronie bez otwierania DevTools:

⁉️🤔 Często zadawane pytania

Czy można zidentyfikować czcionkę na stronie mobilnej?

Tak, ale z ograniczeniami. Rozszerzenia w przeglądarkach mobilnych są niedostępne, DevTools również. Działająca metoda: proszę zrobić zrzut ekranu tekstu na telefonie i przesłać go do WhatTheFont lub Font Squirrel Matcherator przez komputer. Jeśli tekst na stronie jest duży i wyraźny, serwis rozpozna krój ze zrzutu ekranu równie skutecznie, co z obrazu z komputera stacjonarnego.

Co zrobić, jeśli właściciel witryny zmienił nazwę czcionki w CSS?

Niektórzy programiści zmieniają font-family w stylach na dowolną nazwę, choć faktycznie ładują konkretny plik czcionki. W tym przypadku metoda przez DevTools na karcie Application (Frames → Fonts) pokaże rzeczywiste adresy URL plików czcionek. Po nazwie pliku (na przykład Inter-Regular.woff2) z łatwością ustali Pan/Pani krój. Rozszerzenia takie jak Fonts Ninja z „analizą DNA" również omijają zmianę nazwy, analizując sam plik, a nie właściwość CSS.

Która metoda jest najdokładniejsza?

Dla tekstu na stronie: rozszerzenie Whatfont lub Fontanello, jedno najechanie kursorem i dokładna nazwa. Dla obrazów: WhatTheFont ze swoim silnikiem sieci neuronowej jest dokładniejszy niż Matcherator w przypadku czcionek skondensowanych i dekoracyjnych. Dla pełnej pewności przy zmienionej nazwie w CSS: DevTools → Application → Fonts, widzi Pan/Pani rzeczywisty adres URL pliku czcionki, tutaj pomyłka jest wykluczona.

Czy za identyfikację czcionek trzeba płacić?

Nie. Wszystkie wymienione w artykule metody są bezpłatne. DevTools jest wbudowany w przeglądarkę. Whatfont i Fontanello to bezpłatne rozszerzenia open source. Font Squirrel Matcherator to bezpłatny serwis internetowy. WhatTheFont jest bezpłatny (monetyzuje się sprzedażą czcionek, a nie identyfikacją). Fonts Ninja ma wersję płatną, ale podstawowa identyfikacja czcionki działa bez opłat.

Czy można automatycznie zastosować znalezioną czcionkę na swojej stronie?

Technicznie tak, ale prawnie zależy to od licencji czcionki. Zidentyfikować krój może Pan/Pani swobodnie. Natomiast użyć go na swojej stronie można tylko wtedy, gdy czcionka ma otwartą licencję (SIL Open Font License, Apache 2.0) lub kupił Pan/Pani licencję komercyjną. Google Fonts, Font Squirrel i Adobe Fonts to bezpieczne źródła z jasnymi warunkami użytkowania.

Którą metodę identyfikacji czcionki wybrać

Jeśli otwiera Pan/Pani to pytanie po raz pierwszy, proszę zacząć od DevTools. To bezpłatne, zajmuje 30 sekund i nie wymaga instalacji. Do regularnej pracy z typografią proszę zainstalować Whatfont: jedno najechanie kursorem zamiast czterech kliknięć.

Gdy czcionka jest ukryta w obrazie, proszę przesłać zrzut ekranu do WhatTheFont. To najbardziej zaawansowany technologicznie z bezpłatnych serwisów wyszukiwania po obrazie. A jeśli krój został przemianowany w CSS, proszę dotrzeć do pliku przez Application → Fonts w DevTools: ta ścieżka pokazuje prawdę mimo wszelkich sztuczek programisty.

Proszę pamiętać: znalezienie czcionki nie jest trudne. Trudniej jest ją prawidłowo zastosować. Proszę sprawdzać licencję, testować czytelność na rzeczywistej treści i nie mieszać więcej niż dwóch krojów w jednym projekcie. Dobra typografia nie krzyczy, ona działa.