Шрифт, это не просто «красивые буквы». Он управляет вниманием, задаёт настроение и напрямую влияет на читаемость. Плохой шрифт выталкивает посетителя с сайта за секунды, даже если контент внутри отличный.

Бывает, заходишь на сайт и видишь: текст выглядит дорого и стильно. Хочется понять, что за шрифт использован, для своего проекта или просто из профессионального любопытства. Но владельцы сайтов не подписывают типографику, а некоторые намеренно переименовывают шрифты в 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: этот маршрут показывает правду при любых ухищрениях разработчика.

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