Ви гортаєте стрічку сайтів і раптом, ось він. Ідеальний шрифт, який ви шукали тижнями. Той самий розчерк у рядкової «а» та пропорції, від яких верстальник всередині вас пищить від захвату. Але назва? Автор сайту не підписав, у CSS копатися довго, а техпідтримка дизайнера у вихідний.

Шрифт на екрані — це CSS-властивість, а не картинка. Браузер чесно віддає ім’я, накреслення, розмір і навіть словолитню кожному, хто знає, де подивитися. За останні роки інструменти визначення шрифтів пройшли шлях від вкладки DevTools до розширень, які показують ціну ліцензії, підбирають безплатні аналоги та зберігають знахідки в колекцію.

У цьому посібнику, п’ять методів: від миттєвого (права кнопка) до просунутого (аналіз бінарного файлу шрифту). Жоден не потребує дизайнерської освіти чи платної підписки.

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

• Fontanello: права кнопка, і назва шрифту вже в контекстному меню (Chrome, Firefox, Edge, iOS)
• WhatFont: навели курсор на текст, побачили сімейство, розмір, колір і сервіс доставлення (Chrome, Safari)
• Fonts Ninja: визначає шрифт, показує ціну, зберігає знахідки в закладки (Chrome)
• Вбудований інспектор: універсальний спосіб для будь-якого браузера, без розширень
• What Can My Font Do?: завантажуєте файл шрифту, сервіс розшифровує навіть перейменований шрифт

Порівняння методів: таблиця

1. Fontanello, шрифт у контекстному меню

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

Розширення працює в Chrome, Firefox, Edge та на iOS. Це найшвидший спосіб з усіх наявних: буквально одна дія. Не потрібно нікуди наводити курсор, не потрібно перемикатися між вкладками DevTools, права кнопка, і відповідь перед очима.

Плюси:

• Одна дія: права кнопка, і результат у контекстному меню
• Підтримує чотири платформи: Chrome, Firefox, Edge, iOS
• Показує додаткові атрибути: розмір, колір, міжлітерну відстань

Мінуси:

• Не визначає перейменовані шрифти
• Не зберігає історію знайдених шрифтів

Fontanello, вибір для тих, кому важлива швидкість. Одне клацання, без активації, без зайвих рухів.

🔗 Fontanello в Chrome Web Store

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

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

На відміну від Fontanello, WhatFont дає змогу виділити кілька фрагментів тексту одночасно та порівняти шрифти візуально. Розширення показує сімейство шрифту, накреслення, розмір, висоту рядка та колір. Окремий плюс, визначає джерело доставлення шрифту: Google Fonts API, Adobe Fonts (колишній Typekit) або локальний @font-face.

Плюси:

• Три мільйони користувачів, стабільне та перевірене розширення
• Показує сервіс доставлення шрифту: Google Fonts, Adobe Fonts, локальний
• Працює в Chrome і Safari

Мінуси:

• Потребує клацання по іконці для активації, зайва дія порівняно з Fontanello
• Немає версії для Firefox

🔗 WhatFont в Chrome Web Store

3. Fonts Ninja, дизайнерський комбайн

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

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

Розширення використовують 900 тисяч осіб, рейтинг 4.4. Працює поки що тільки в Chrome. За розміром важчий за WhatFont, 2 МБ проти 741 КБ, але функціональність це виправдовує.

Плюси:

• Показує ціну шрифту, словолитню та схожі альтернативи
• Вбудовані закладки для знайдених шрифтів
• Пошук за формою символів і типом ліцензії

Мінуси:

• Тільки Chrome, немає версій для Safari та Firefox
• Важчий за аналоги: 2 МБ проти 741 КБ у WhatFont

🔗 Fonts Ninja в Chrome Web Store

4. Вбудований інспектор, універсальний метод без розширень

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

Google Chrome. Клацніть правою кнопкою по тексту та виберіть «Переглянути код» (Inspect). Відкриється панель DevTools. На вкладці Styles знайдіть властивість font-family, там перелічені всі шрифти, застосовані до елемента. Перший у списку, той, який рендериться прямо зараз.

Firefox. У Firefox є виділена вкладка «Шрифти» (Fonts) в інспекторі. Клацніть правою кнопкою → «Дослідити елемент» → перейдіть на вкладку Fonts. Ви побачите не лише назву шрифту, а й його накреслення, розмір і навіть попередній перегляд гліфів, такого немає в жодному розширенні.

Safari. Спочатку ввімкніть меню «Розробка»: Safari → Налаштування → Додатки → позначка «Показувати меню Розробка». Тепер клацніть правою кнопкою по тексту → «Перевірити елемент». На бічній панелі виберіть «Стилі, Обчислені» (Styles, Computed) і знайдіть розділ font-family.

Плюси:

• Нічого не потрібно встановлювати, вбудовано в кожен браузер
• Firefox показує попередній перегляд гліфів на вкладці Fonts
• Працює для будь-якого елемента, не лише текстового

Мінуси:

• Повільніше за розширення: 10-30 секунд проти миттєвого результату
• Незручно для масового перегляду шрифтів на сторінці

5. What Can My Font Do?, розшифрування перейменованих шрифтів

Серйозна перешкода для всіх розширень та інспектора, перейменований шрифт. Коли розробник збирає кастомний пакет, назва font-family втрачає зв’язок з оригіналом: замість Inter або Roboto ви бачите щось на кшталт custom-font-3742. Розширення безсилі, вони читають CSS-властивість, а не сам файл.

Рішення, сервіс What Can My Font Do?. Алгоритм дій:

• Через інспектор Chrome перейдіть на вкладку Application → Frames → Fonts. Знайдіть файл шрифту, зіставивши ім’я файлу з тим, що бачите в font-family.
• Відкрийте файл шрифту в новій вкладці, він завантажиться.
• Перетягніть завантажений файл у вікно What Can My Font Do?. Сервіс проаналізує бінарні дані та покаже: справжню назву шрифту, словолитню, кількість гліфів, підтримку мов, ліцензію та всі символи у вигляді таблиці.

Це не миттєвий спосіб, він потребує хвилину-дві та базового розуміння DevTools. Але коли розширення пасують перед перейменованим або кастомно зібраним шрифтом, What Can My Font Do?, єдиний робочий метод.

Плюси:

• Визначає перейменовані шрифти через аналіз бінарного файлу
• Показує повну інформацію: гліфи, мови, ліцензію
• Безплатний вебсервіс, не потребує встановлення

Мінуси:

• Повільний: одна-дві хвилини на шрифт
• Потребує розуміння вкладки Application у DevTools

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

Дивіться покроковий туторіал з усіх п’яти методів у дії, від розширень до інспектора:

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

Розширення для шрифтів** безпечні? Чи не збирають вони дані?**

WhatFont, Fontanello та Fonts Ninja не збирають особисті дані та не передають інформацію про відвідувані сайти. У картці Chrome Web Store у WhatFont розробник прямо заявляє: розширення не збирає та не використовує дані користувача. Fonts Ninja запитує більше дозволів, але це необхідно для роботи збереження шрифтів.

Чи можна дізнатися комерційний шрифт і ціну його ліцензії?

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

Що робити, якщо шрифт визначився, але завантажити його не можна?

Шрифти на сайтах майже завжди захищені авторським правом. Дізнатися назву, законно. Завантажувати та використовувати без ліцензії, ні. Якщо шрифт платний (наприклад, із каталогу Linotype або Monotype), купіть ліцензію на сайті словолитні. Безплатні шрифти найчастіше лежать на Google Fonts, їх можна використовувати вільно в будь-якому проєкті.

Чому Firefox показує шрифт, а Chrome, ні?

Таке буває, коли шрифт підключається через @font-face з різними форматами: WOFF2 для Chrome, WOFF для старих версій Firefox. Якщо в Chrome шрифт не відображається, перевірте консоль DevTools на вкладці Console: можливо, файл шрифту заблокований CORS-політикою або не завантажився через блокувальник реклами.

Який спосіб обрати верстальнику, а який, дизайнеру?

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

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

Найкращий вибір залежить від завдання. Якщо ви верстальник та інспектор уже відкритий, залишайтеся в ньому, вкладка Fonts у Firefox дасть більше інформації, ніж будь-яке розширення. Якщо ви дизайнер у пошуку референсів, ставте Fonts Ninja заради закладок, цін і схожих шрифтів. Для швидких перевірок Fontanello, король швидкості: права кнопка, і готово.

А коли жодне розширення не справляється, перейменований шрифт, кастомна збірка, саморобний пакет, завантажуйте файл у сервіс аналізу шрифтів What Can My Font Do?. Це останній рубіж, який працює завжди.