Вы листаете ленту сайтов и вдруг, он. Идеальный шрифт, который вы искали неделями. Тот самый росчерк у строчной «а» и пропорции, от которых верстальщик внутри вас пищит от восторга. Но название? Автор сайта не подписал, в 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?. Это последний рубеж, который работает всегда.