Бувало таке: гортаєте сайт, і раптом, стоп. Шрифт у заголовку настільки гарний, що ви вже подумки прикидаєте, як він виглядав би у вашому проєкті. Але як він називається? Власник сайту не відповів, у вихідному коді, обфускований CSS, а гуглити «красивий шрифт із зарубками та дивною G» можна до ранку.

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

На щастя, 2026 рік дає набір інструментів, які вирішують проблему за секунди. Одні працюють за завантаженим зображенням, інші, прямо на живій сторінці. Розбираємо 9 способів визначити шрифт: від класичних сервісів до букмарклетів, які важать нуль мегабайт.

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

• Завантажуєте скриншот із текстом у WhatTheFont або WhatFontIs, і отримуєте назву шрифту (часто з безплатним аналогом).
• Встановлюєте розширення Fonts Ninja або WhatFont, наводите курсор на текст сайту й бачите назву, розмір, висоту рядка та колір.
• Немає навіть скриншота, відкриваєте Identifont, відповідаєте на 5-10 запитань про форму літер і отримуєте збіг.
• Знайшли шрифт, завантажуєте його на сайт через CSS @font-face (або плагін для WordPress) і користуєтеся.

Онлайн-сервіси: визначаємо шрифт за завантаженим зображенням

Ці чотири інструменти працюють за єдиним принципом: ви даєте їм зображення з текстом, а вони проганяють його через базу із сотень тисяч шрифтів і повертають збіги.

1. WhatTheFont, золотий стандарт від MyFonts

WhatTheFont від MyFonts, найточніший визначник шрифтів на 2026 рік. Під капотом, глибоке навчання на базі з понад 233 000 шрифтових стилів. Завантажуєте зображення, клікаєте по тексту, отримуєте список збігів. База зміщена в бік комерційних шрифтів, але майже завжди пропонує й безплатні альтернативи.

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

🔗 WhatTheFont на MyFonts

2. WhatFontIs, найбільша база (понад 900 000 шрифтів)

WhatFontIs має найбільшу базу, понад 900 000 шрифтів. Запускайте другим, якщо WhatTheFont не дав упевненого результату.

Головна фішка: автоматичний підбір безплатних аналогів із Google Fonts до платних збігів. Для бюджету вебпроєкту це година зекономленого часу.

Плюси: найбільший індекс, підказки безплатних альтернатив, браузерне розширення. Мінуси: безплатна версія забита рекламою, потрібно вручну розмітити символи перед пошуком.

🔗 WhatFontIs

3. Fontspring Matcherator, точність на OpenType

Fontspring Matcherator, фаворит дизайнерів, які працюють із незалежними словолитнями. На відміну від WhatTheFont (каталог MyFonts), Matcherator охоплює indie-шрифти, виявляє OpenType-фічі (лігатури, альтернативні гліфи) і підтримує drag-and-drop.

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

🔗 Fontspring Matcherator

4. Font Squirrel, безплатні шрифти й нуль реклами

Font Squirrel здобув репутацію завдяки куруванню безплатних шрифтів для комерційного використання. Його Matcherator, наймінімалістичніший: завантажили, обрізали, отримали. Жодної реклами, жодних попапів. Коронна фіча, поворот зображення: якщо шрифт під кутом, Font Squirrel дає раду там, де інші пасують.

Плюси: найчистіший інтерфейс, вільні шрифти, швидкі результати. Мінуси: база замала, комерційні шрифти майже не знаходить.

🔗 Font Squirrel Matcherator

Розширення браузера: дізнаємося шрифт прямо на сайті

Онлайн-сервіси добрі для зображень. Але якщо шрифт перед вами просто зараз, на живій вебсторінці, розширення браузера дають відповідь за секунду. Жодних скриншотів, жодних нових вкладок.

5. Fonts Ninja, спробувати, купити, завантажити

Fonts Ninja (раніше FontFaceNinja), беззаперечний лідер серед браузерних визначників шрифту. Розширення доступне для Chrome, Firefox, Safari та Edge.

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

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

Плюси: повний набір, визначити, спробувати, завантажити; працює у 4 браузерах. Мінуси: для розширених фільтрів (форма літер, тип ліцензії) потрібна реєстрація.

🔗 Fonts Ninja у Chrome Web Store

6. WhatFont, навести й дізнатися все

WhatFont, розширення, рекомендоване Wired і улюблене веброзробниками за простоту. Доступне для Chrome і Firefox.

Навели курсор, спливає назва шрифту. Клікнули, отримуєте повну карту CSS-властивостей: сімейство, насиченість, розмір, висоту рядка, колір у HEX. Це не просто визначник — це інспектор типографіки. Якщо шрифт із каталогу Google Fonts, WhatFont дає пряме посилання на завантаження.

Плюси: миттєвий результат, глибокий CSS-аналіз, посилання на Google Fonts. Мінуси: не визначає шрифти на зображеннях (лише живий текст на сторінці), не дає змоги спробувати шрифт своїм текстом.

🔗 WhatFont у Chrome Web Store

7. Typ.io, шрифтові пари й натхнення

Typ.io розв'язує задачу на крок далі: мало впізнати шрифт, хочеться зрозуміти, з чим він поєднується. Після встановлення розширення в кутку браузера з'являється кнопка «T». Натиснули, і бачите всі шрифти сторінки окремим списком. Клікаєте за назвою, переходите до картки шрифту з прикладами пар: «цей шрифт використовують разом із...»

Сам сайт Typ.io — це база реальних дизайнерських рішень: спільнота завантажує скриншоти сайтів із розбором шрифтових комбінацій. Для тих, хто хоче не просто знайти шрифт, а зрозуміти контекст його використання.

Плюси: підбір шрифтових пар, база реальних прикладів. Мінуси: розширення показує лише назви шрифтів (без CSS-деталей), повний функціонал потребує реєстрації.

🔗 Typ.io

8. Fount, букмарклет, який нічого не важить

Fount, не розширення, а букмарклет. Ви додаєте кнопку в закладки браузера, заходите на будь-який сайт, натискаєте цю закладку, і курсор перетворюється на хрестик. Клікаєте по тексту, з'являється віконце з назвою шрифту, розміром, насиченістю та стилем. Повторний клік по закладці вимикає режим.

Ідеальний вибір для тих, хто не хоче захаращувати браузер розширеннями. Працює в Safari, Chrome, Firefox та IE8+. Не потребує оновлень, не збирає дані, не використовує фонові процеси. Просто працює.

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

🔗 Fount, додати букмарклет

Особливий метод: коли немає ні зображення, ні сайту

9. Identifont, визначаємо шрифт за описом

Identifont, найстаріший інструмент у цій добірці (з 2000 року), але досі незамінний. Він не приймає зображення і не сканує сайти. Натомість ставить запитання: чи є засічки в літери «Q»? Чи з’єднані петлі рядкової «g»? Як виглядає знак «&»?

Ви відповідаєте на 5-10 запитань, Identifont звужує коло й видає збіг. Звучить архаїчно, але це єдиний робочий метод, коли у вас немає ні скриншоту, ні URL, лише пам’ять про те, як виглядав шрифт.

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

🔗 Identifont

Порівняльна таблиця: що обрати

Одного ідеального інструменту немає. Схема профі: скидаєте зображення в WhatTheFont, другим проходом, у Fontspring Matcherator, і дивитеся перетин. Яка назва повторюється, те й правда.

Як завантажити знайдений шрифт на сайт

Визначили шрифт, завантажили файл, тепер його потрібно додати на сайт. Найуніверсальніший метод, @font-face.

Крок 1. Завантажте шрифт у форматі .ttf або .otf.

Крок 2. Сконвертуйте у вебформати через Font Squirrel Webfont Generator. На виході отримаєте .woff, .woff2 і .ttf, а також готовий CSS-файл. WOFF2, основний формат для вебу у 2026 році, він підтримується 98% браузерів.

Крок 3. Завантажте файли шрифту на сервер через FTP або файловий менеджер хостингу, у папку /wp-content/themes/ваша-тема/fonts/.

Крок 4. Пропишіть @font-face у 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
}

Директива font-display: swap критична: браузер спочатку покаже системний шрифт, а коли кастомний завантажиться, підмінить. Без неї текст буде невидимим, доки шрифт не завантажиться.

Крок 5. Застосуйте шрифт до елементів:

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

WordPress: плагін Custom Fonts дає візуальний інтерфейс для завантаження будь-яких шрифтів. Або пропишіть @font-face у functions.php дочірньої теми через хук wp_head.

Перед будь-якими правками файлів теми зробіть бекап. Помилка в @font-face або functions.php може покласти сайт.

Подивіться коротке відео, в якому показано весь процес, від скриншоту до готової назви шрифту, з використанням WhatTheFont:

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

Чому WhatTheFont не знаходить мій шрифт?

Три основні причини: погана якість зображення, текст повернутий під кутом або шрифт рукописний. Зробіть скриншот більшим, на контрастному тлі та горизонтально. Не допомогло, спробуйте Fontspring Matcherator і WhatFontIs. Для рукописних шрифтів точного збігу часто немає в принципі: вони унікальні.

Чи можна визначити шрифт із PDF-файлу?

Так, якщо текст не растрований. Відкрийте PDF, виділіть текст і зробіть скриншот. Завантажте в будь-який сервіс із першої четвірки. Для сканів результат залежить від роздільної здатності: 150 DPI і вище дають прийнятну точність.

Шрифт визначився, але він платний. Де взяти безкоштовний аналог?

WhatFontIs автоматично пропонує безкоштовні аналоги з Google Fonts під кожним платним збігом. Вручну: заходьте на fonts.google.com, вводьте назву знайденого шрифту і дивіться візуально схожі. Безкоштовні заміни: із засічками, Playfair Display, Lora, Merriweather; без засічок, Inter, Roboto, Manrope.

Який формат шрифту використовувати для вебу у 2026 році?

WOFF2, основний, WOFF, fallback для старих браузерів. TTF і OTF у вебі використовувати не варто: вони важать у 2-3 рази більше без стиснення. Генератор Font Squirrel (згаданий вище) конвертує все у WOFF2+WOFF одним кліком.

Що ставити у 2026 році: підсумковий розклад

Дев'ять інструментів, не означає, що потрібно використовувати всі. Ось проста матриця вибору:

• Є скриншот → WhatTheFont, потім Fontspring Matcherator для перевірки.
• Потрібен безкоштовний аналог → WhatFontIs (автопідбір із Google Fonts).
• Шрифт на живому сайті → Fonts Ninja або WhatFont (розширення за 5 секунд).
• Нічого немає, тільки пам'ять → Identifont.
• Не хочете встановлювати розширення → Fount (букмарклет у закладки).

А якщо жоден інструмент не впорався, відкрийте DevTools (F12 → Inspect → Computed → font-family). Незручно, але надійно. І сабредіт r/identifythisfont ніхто не скасовував: живі дизайнери називають шрифт за пару хвилин.

Хороший шрифт змінює сприйняття сайту швидше, ніж переверстування трьох блоків. Тепер у вас є все, щоб знайти той самий і поставити його на свій проєкт.