Przegląda Pan strony i nagle, oto on. Idealny font, którego szukał Pan od tygodni. Ten sam charakterystyczny detal w małej literze „a" i proporcje, od których typograf w Panu piszczy z zachwytu. Ale nazwa? Autor strony jej nie podpisał, grzebanie w CSS zajmie dużo czasu, a wsparcie techniczne projektanta ma wolne.

Font na ekranie to właściwość CSS, a nie obrazek. Przeglądarka uczciwie podaje nazwę, odmianę, rozmiar, a nawet odlewnię każdemu, kto wie, gdzie patrzeć. W ostatnich latach narzędzia do identyfikacji fontów przeszły drogę od zakładki DevTools do rozszerzeń, które pokazują cenę licencji, dobierają darmowe odpowiedniki i zapisują znaleziska w kolekcji.

W tym poradniku pięć metod: od natychmiastowej (prawy przycisk myszy) do zaawansowanej (analiza pliku binarnego fontu). Żadna nie wymaga wykształcenia projektowego ani płatnej subskrypcji.

💡 Szybki przegląd:

• Fontanello: prawy przycisk myszy i nazwa fontu już w menu kontekstowym (Chrome, Firefox, Edge, iOS)
• WhatFont: najechał Pan kursorem na tekst, zobaczył rodzinę, rozmiar, kolor i serwis dostarczający (Chrome, Safari)
• Fonts Ninja: identyfikuje font, pokazuje cenę, zapisuje znaleziska w zakładkach (Chrome)
• Wbudowany inspektor: uniwersalny sposób dla każdej przeglądarki, bez rozszerzeń
• What Can My Font Do?: wgrywa Pan plik fontu, serwis rozszyfrowuje nawet przemianowany font

Porównanie metod: tabela

1. Fontanello, font w menu kontekstowym

Fontanello to rozszerzenie, które dodaje nazwę fontu bezpośrednio do menu kontekstowego przeglądarki. Zaznaczył Pan tekst, kliknął prawym przyciskiem, wybrał Fontanello i widzi Pan nie tylko rodzinę fontu, ale też odmianę, rozmiar, odstępy między literami i kolor. Żadnych dodatkowych paneli, nie trzeba aktywować narzędzia na pasku narzędzi.

Rozszerzenie działa w Chrome, Firefox, Edge i na iOS. To najszybszy sposób ze wszystkich dostępnych: dosłownie jedna czynność. Nie trzeba nigdzie najeżdżać kursorem, nie trzeba przełączać się między zakładkami DevTools, prawy przycisk i odpowiedź przed oczami.

Plusy:

• Jedna czynność: prawy przycisk i wynik w menu kontekstowym
• Obsługuje cztery platformy: Chrome, Firefox, Edge, iOS
• Pokazuje dodatkowe atrybuty: rozmiar, kolor, odstępy między literami

Minusy:

• Nie identyfikuje przemianowanych fontów
• Nie zapisuje historii znalezionych fontów

Fontanello to wybór dla tych, dla których liczy się szybkość. Jedno kliknięcie, bez aktywacji, bez zbędnych ruchów.

🔗 Fontanello w Chrome Web Store

2. WhatFont, najedź i dowiedz się

WhatFont to jedno z najpopularniejszych rozszerzeń do identyfikacji fontów: trzy miliony użytkowników i ocena 4.0 w Chrome Web Store. Zasada działania jest prosta: klika Pan ikonę WhatFont na pasku narzędzi, najedża kursorem na tekst, a na stronie pojawia się etykieta z pełną informacją o foncie.

W przeciwieństwie do Fontanello, WhatFont umożliwia zaznaczenie kilku fragmentów tekstu jednocześnie i wizualne porównanie fontów. Rozszerzenie pokazuje rodzinę fontu, odmianę, rozmiar, wysokość wiersza i kolor. Osobnym plusem jest identyfikacja źródła dostarczania fontu: Google Fonts API, Adobe Fonts (dawniej Typekit) lub lokalny @font-face.

Plusy:

• Trzy miliony użytkowników, stabilne i sprawdzone rozszerzenie
• Pokazuje serwis dostarczający font: Google Fonts, Adobe Fonts, lokalny
• Działa w Chrome i Safari

Minusy:

• Wymaga kliknięcia ikony w celu aktywacji, dodatkowa czynność w porównaniu z Fontanello
• Nie ma wersji dla Firefox

🔗 WhatFont w Chrome Web Store

3. Fonts Ninja, kombajn dla projektantów

Fonts Ninja poszedł dalej niż prosta identyfikacja fontu. Oprócz nazwy i właściwości CSS rozszerzenie pokazuje: ile stylów jest dostępnych dla znalezionego fontu, nazwę odlewni-producenta, cenę licencji oraz, co szczególnie cenne, listę podobnych fontów.

Wbudowany system zakładek oszczędza projektantom godziny. Znalazł Pan ciekawy font na cudzej stronie, zapisał do kolekcji bezpośrednio z rozszerzenia, a później udostępnił listę zespołowi. Wyszukiwanie działa według kształtu znaków, typu licencji i ceny, co jest wygodne, gdy potrzebny jest budżetowy odpowiednik drogiego fontu.

Z rozszerzenia korzysta 900 tysięcy osób, ocena 4.4. Działa na razie tylko w Chrome. Jest cięższe od WhatFont, 2 MB wobec 741 KB, ale funkcjonalność to uzasadnia.

Plusy:

• Pokazuje cenę fontu, odlewnię i podobne alternatywy
• Wbudowane zakładki dla znalezionych fontów
• Wyszukiwanie według kształtu znaków i typu licencji

Minusy:

• Tylko Chrome, nie ma wersji dla Safari i Firefox
• Cięższe od odpowiedników: 2 MB wobec 741 KB w WhatFont

🔗 Fonts Ninja w Chrome Web Store

4. Wbudowany inspektor, uniwersalna metoda bez rozszerzeń

Gdy nie chce Pan instalować rozszerzeń lub pracuje w przeglądarce, dla której ich nie ma, każda nowoczesna przeglądarka ma wbudowane narzędzie do identyfikacji fontu. Jest to wolniejsze niż rozszerzenia, ale nie wymaga instalowania absolutnie niczego.

Google Chrome. Proszę kliknąć prawym przyciskiem myszy na tekście i wybrać „Zbadaj" (Inspect). Otworzy się panel DevTools. Na karcie Styles proszę znaleźć właściwość font-family, tam wymienione są wszystkie fonty zastosowane do elementu. Pierwszy na liście to ten, który jest renderowany w tej chwili.

Firefox. W Firefox jest wydzielona karta „Fonty" (Fonts) w inspektorze. Proszę kliknąć prawym przyciskiem → „Zbadaj element" → przejść na kartę Fonts. Zobaczy Pan nie tylko nazwę fontu, ale też jego odmianę, rozmiar, a nawet podgląd glifów, czego nie ma w żadnym rozszerzeniu.

Safari. Najpierw proszę włączyć menu „Rozwój": Safari → Preferencje → Zaawansowane → zaznaczenie „Pokazuj menu Rozwój". Teraz proszę kliknąć prawym przyciskiem na tekście → „Sprawdź element". Na panelu bocznym proszę wybrać „Style, Obliczone" (Styles, Computed) i znaleźć sekcję font-family.

Plusy:

• Niczego nie trzeba instalować, wbudowane w każdą przeglądarkę
• Firefox pokazuje podgląd glifów na karcie Fonts
• Działa dla każdego elementu, nie tylko tekstowego

Minusy:

• Wolniejsze niż rozszerzenia: 10-30 sekund wobec natychmiastowego wyniku
• Niewygodne do masowego przeglądania fontów na stronie

5. What Can My Font Do?, rozszyfrowywanie przemianowanych fontów

Poważną przeszkodą dla wszystkich rozszerzeń i inspektora jest przemianowany font. Gdy programista tworzy niestandardowy pakiet, nazwa font-family traci związek z oryginałem: zamiast Inter lub Roboto widzi Pan coś w rodzaju custom-font-3742. Rozszerzenia są bezsilne, odczytują właściwość CSS, a nie sam plik.

Rozwiązaniem jest serwis What Can My Font Do?. Algorytm działań:

• Przez inspektor Chrome proszę przejść na kartę Application → Frames → Fonts. Proszę znaleźć plik fontu, porównując nazwę pliku z tym, co widać w font-family.
• Proszę otworzyć plik fontu w nowej karcie, zostanie pobrany.
• Proszę przeciągnąć pobrany plik do okna What Can My Font Do?. Serwis przeanalizuje dane binarne i pokaże: prawdziwą nazwę fontu, odlewnię, liczbę glifów, obsługę języków, licencję i wszystkie znaki w formie tabeli.

To nie jest natychmiastowy sposób, wymaga minuty lub dwóch i podstawowego zrozumienia DevTools. Ale gdy rozszerzenia zawodzą wobec przemianowanego lub niestandardowo złożonego fontu, What Can My Font Do? jest jedyną działającą metodą.

Plusy:

• Identyfikuje przemianowane fonty poprzez analizę pliku binarnego
• Pokazuje pełną informację: glify, języki, licencję
• Bezpłatny serwis www, nie wymaga instalacji

Minusy:

• Powolny: jedna-dwie minuty na font
• Wymaga zrozumienia karty Application w DevTools

Wideo: jak zidentyfikować font w minutę

Proszę obejrzeć samouczek krok po kroku ze wszystkimi pięcioma metodami w działaniu, od rozszerzeń po inspektor:

⁉️🤔 Często zadawane pytania

Czy rozszerzenia do fontów są bezpieczne? Czy nie zbierają danych?

WhatFont, Fontanello i Fonts Ninja nie zbierają danych osobowych i nie przekazują informacji o odwiedzanych stronach. W karcie Chrome Web Store dla WhatFont programista wprost deklaruje: rozszerzenie nie zbiera i nie wykorzystuje danych użytkownika. Fonts Ninja prosi o więcej uprawnień, ale jest to konieczne do działania funkcji zapisywania fontów.

Czy można poznać font komercyjny i cenę jego licencji?

Fonts Ninja jest jedynym rozszerzeniem z listy, które pokazuje cenę licencji bezpośrednio po najechaniu na tekst. W przypadku projektów komercyjnych oszczędza to godziny: nie trzeba szukać fontu osobno na MyFonts lub Adobe Fonts, aby poznać koszt.

Co zrobić, jeśli font został zidentyfikowany, ale nie można go pobrać?

Fonty na stronach są prawie zawsze chronione prawem autorskim. Poznanie nazwy jest legalne. Pobieranie i używanie bez licencji już nie. Jeśli font jest płatny (na przykład z katalogu Linotype lub Monotype), proszę kupić licencję na stronie odlewni. Darmowe fonty najczęściej znajdują się na Google Fonts, można ich używać swobodnie w każdym projekcie.

Dlaczego Firefox pokazuje font, a Chrome nie?

Zdarza się tak, gdy font jest podłączany przez @font-face z różnymi formatami: WOFF2 dla Chrome, WOFF dla starszych wersji Firefox. Jeśli w Chrome font się nie wyświetla, proszę sprawdzić konsolę DevTools na karcie Console: być może plik fontu jest zablokowany przez politykę CORS lub nie załadował się z powodu blokady reklam.

Który sposób wybrać dla typografa, a który dla projektanta?

Dla typografa wygodniejszy jest wbudowany inspektor, jest on już otwarty w procesie pracy, nie trzeba się przełączać. Dla projektanta Fonts Ninja: pokazuje cenę, alternatywy i umożliwia zapisywanie znalezisk do przyszłych projektów. Do jednorazowych sprawdzeń „co to za font?" proszę użyć Fontanello, jedno kliknięcie i odpowiedź przed oczami.

Które narzędzie do identyfikacji fontów wybrać?

Najlepszy wybór zależy od zadania. Jeśli jest Pan typografem i inspektor jest już otwarty, proszę w nim pozostać, karta Fonts w Firefox dostarczy więcej informacji niż jakiekolwiek rozszerzenie. Jeśli jest Pan projektantem szukającym referencji, proszę zainstalować Fonts Ninja dla zakładek, cen i podobnych fontów. Do szybkich sprawdzeń Fontanello jest królem szybkości: prawy przycisk i gotowe.

A gdy żadne rozszerzenie nie daje rady, przemianowany font, niestandardowa kompilacja, własnoręcznie zrobiony pakiet, proszę wgrać plik do serwisu analizy fontów What Can My Font Do?. To ostatnia linia obrony, która działa zawsze.