Шрифт — це не просто «красиві літери». Він керує увагою, задає настрій і безпосередньо впливає на читабельність. Поганий шрифт виштовхує відвідувача з сайту за секунди, навіть якщо контент всередині чудовий.

Буває, заходиш на сайт і бачиш: текст виглядає дорого й стильно. Хочеться зрозуміти, що за шрифт використано, для свого проєкту чи просто з професійної цікавості. Але власники сайтів не підписують типографіку, а дехто навмисно перейменовує шрифти в CSS, ускладнюючи ідентифікацію.

Хороша новина: дізнатися шрифт із будь-якого сайту реально. Для цього не потрібно бути верстальником чи дизайнером, достатньо трьох підходів, які закривають практично всі сценарії. Від вбудованого інспектора браузера до розширень в один клік і сервісів для шрифтів на зображеннях.

💡 Швидкий огляд:

• Відкрийте DevTools (F12) і знайдіть font-family на вкладці Computed

• Встановіть Whatfont або Fontanello та наводьте курсор на текст

• Завантажте скриншот у Font Squirrel Matcherator або WhatTheFont

1. Вбудований інспектор браузера

Найдоступніший метод, який не потребує встановлення взагалі нічого. Кожен сучасний браузер, Chrome, Firefox, Edge, Safari, містить інструменти розробника (DevTools). Серед них, інспектор, що показує CSS-властивості будь-якого елемента на сторінці, включно зі шрифтом.

Як відкрити. На Windows натисніть Ctrl + Shift + I, на Mac, Cmd + Shift + I. Або клацніть правою кнопкою по тексту та виберіть «Inspect» / «Переглянути код». Відкриється панель DevTools.

У лівій частині панелі ви побачите HTML-структуру, у правій, CSS-правила. Але найшвидший шлях до шрифту лежить через вкладку Computed (українською, «Обчислені»). Прокрутіть список властивостей до font-family, це і є назва гарнітури. Поруч із нею браузер показує конкретний шрифтовий файл, який рендериться на сторінці.

Є й альтернативний маршрут для тих, хто хоче побачити взагалі всі шрифти сайту одразу. У Chrome DevTools відкрийте вкладку Application → розділ Frames → папка Fonts. Браузер виведе список кожного завантаженого шрифтового файлу з його URL та форматом (woff2, ttf). Працює повільніше, зате показує те, що приховано в @font-face.

Плюси: безплатно, не потребує розширень, показує точну назву шрифту та його накреслення (weight, style, size). Мінуси: потрібно зробити кілька кліків, на мобільних пристроях метод незастосовний.

2. Розширення для браузера

Якщо ви часто перевіряєте шрифти, розширення зекономить години. Принцип простий: наводите курсор на текст, розширення показує назву шрифту та його CSS-параметри у спливній підказці.

2.1 Whatfont

Найпопулярніше рішення в цій ніші. Рекомендовано Wired, Lifehacker і SwissMiss. Встановлення з Chrome Web Store, одне натискання.

Після встановлення клацніть по іконці розширення у правому верхньому куті браузера, щоб активувати режим визначення. Тепер при наведенні на будь-який текст Whatfont показує гарнітуру прямо над курсором. Клік по тексту розкриває повну картку: сімейство, накреслення, розмір, міжрядковий інтервал і колір.

Розширення працює і на Firefox, і на Safari (через порт). Безплатно, без реєстрації, відкритий вихідний код на GitHub.

🔗 Whatfont у Chrome Web Store

2.2 Fontanello

Якщо Whatfont показує інформацію за наведенням, то Fontanello, за правим кліком. Виділяєте текст на сайті, натискаєте праву кнопку миші та вибираєте Fontanello в контекстному меню. З’являється панель із повною інформацією: назва шрифту, насиченість, розмір, колір і навіть контрастність тексту відносно тла (критерій accessibility).

Fontanello доступний для Chrome і Firefox. Окремий плюс: розширення не навантажує сторінку постійним відстеженням, воно спрацьовує лише за вашим запитом.

🔗 Fontanello в Chrome Web Store

2.3 Fonts Ninja

Потужніший інструмент із функцією «ДНК шрифту», власним алгоритмом, який аналізує файли гарнітур для точнішого результату. Крім визначення шрифту за наведенням, Fonts Ninja вміє зберігати знайдені шрифти в закладки та показувати зведення всіх гарнітур, використаних на сторінці.

Є нюанс: для закладок і деяких функцій потрібна реєстрація. Але базове визначення шрифтів працює без облікового запису. Розширення платне (є trial), тому його варто розглядати, якщо ви працюєте з типографікою професійно.

🔗 Fonts Ninja в Chrome Web Store

3. Як визначити шрифт за зображенням

Інспектор і розширення безсилі, коли шрифт є частиною зображення: логотип, банер, мем. Текст на зображенні не є HTML-елементом, а отже, у нього немає CSS-властивостей. Для таких випадків існують спеціалізовані сервіси.

3.1 Font Squirrel Matcherator

Безплатний інструмент від Font Squirrel, перевірений роками. Алгоритм роботи:

• Завантажте скриншот або фрагмент із текстом в інтерфейс Matcherator
• Виділіть область із літерами (синій маркер на панелі інструментів)
• Натисніть «Matcherate It!»

Сервіс проаналізує форму символів і видасть список найближчих збігів зі своєї бази. Якщо точного збігу немає, запропонує візуально схожі альтернативи із зазначенням відсотка подібності. Працює навіть із рукописними шрифтами, якщо літери не злиплися.

🔗 Font Squirrel Matcherator

3.2 WhatTheFont від MyFonts

WhatTheFont використовує глибоке навчання та базу з понад 233 000 шрифтів. Завантажуєте зображення, клацаєте по потрібній літері, і алгоритм знаходить збіги. Головна перевага перед Matcherator: WhatTheFont дає раду зі злитими рукописними шрифтами (connected scripts), де літери переходять одна в одну. Це серйозний технічний доробок, якого у старих сервісів немає.

Для найкращого результату завантажуйте горизонтальний текст хорошої роздільної здатності на контрастному тлі.

🔗 WhatTheFont на MyFonts

Відео: визначення шрифту за хвилину

Коротка демонстрація того, як встановити розширення Identify Font і знайти шрифт на будь-якому сайті без відкриття DevTools:

⁉️🤔 Часті запитання

Чи можна визначити шрифт на мобільному сайті?

Так, але з обмеженнями. Розширення на мобільних браузерах недоступні, DevTools також. Робочий шлях: зробіть скриншот тексту на телефоні та завантажте його в WhatTheFont або Font Squirrel Matcherator через комп’ютер. Якщо текст на сайті великий і чіткий, сервіс розпізнає гарнітуру за скриншотом так само успішно, як за десктопним зображенням.

Що робити, якщо власник сайту перейменував шрифт у CSS?

Деякі розробники змінюють font-family у стилях на довільне ім’я, хоча фактично підвантажують конкретний шрифтовий файл. У цьому випадку метод через DevTools на вкладці Application (Frames → Fonts) покаже реальні URL шрифтових файлів. За назвою файлу (наприклад, Inter-Regular.woff2) ви легко визначите гарнітуру. Розширення на кшталт Fonts Ninja з «ДНК-аналізом» також обходять перейменування, аналізуючи сам файл, а не CSS-властивість.

Який метод найточніший?

Для тексту на сторінці: розширення Whatfont або Fontanello, один ховер, і точна назва. Для зображень: WhatTheFont з його нейромережевим рушієм точніший за Matcherator на злитих і декоративних шрифтах. Для повної впевненості при перейменованому CSS: DevTools → Application → Fonts, ви бачите реальний URL файлу шрифту, тут помилку виключено.

Чи потрібно платити за визначення шрифтів?

Ні. Усі перелічені у статті методи безплатні. DevTools вбудовано в браузер. Whatfont і Fontanello, безплатні розширення з відкритим кодом. Font Squirrel Matcherator, безплатний вебсервіс. WhatTheFont, безплатний (монетизується продажем шрифтів, а не ідентифікацією). Fonts Ninja має платну версію, але базове визначення шрифту працює без оплати.

Чи можна автоматично застосувати знайдений шрифт на своєму сайті?

Технічно так, але юридично залежить від ліцензії шрифту. Визначити гарнітуру ви можете вільно. А от використовувати її на своєму сайті можна лише якщо шрифт має відкриту ліцензію (SIL Open Font License, Apache 2.0) або ви придбали комерційну ліцензію. Google Fonts, Font Squirrel і Adobe Fonts, безпечні джерела зі зрозумілими умовами використання.

Який метод визначення шрифту обрати

Якщо ви відкриваєте це питання вперше, почніть із DevTools. Це безплатно, займає 30 секунд і не потребує встановлення. Для регулярної роботи з типографікою встановіть Whatfont: один ховер замість чотирьох кліків.

Коли шрифт захований у зображенні, завантажте скриншот у WhatTheFont. Це найтехнологічніший із безплатних сервісів пошуку за зображенням. А якщо гарнітуру перейменовано в CSS, доберіться до файлу через Application → Fonts у DevTools: цей маршрут показує правду за будь-яких хитрощів розробника.

Пам’ятайте: знайти шрифт не складно. Складніше правильно його застосувати. Перевіряйте ліцензію, тестуйте читабельність на реальному контенті та не змішуйте більше двох гарнітур в одному проєкті. Хороша типографіка не кричить, вона працює.