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

Хороший шрифт меняет восприятие сайта быстрее, чем перевёрстка трёх блоков. Теперь у вас есть всё, чтобы найти тот самый, и поставить его на свой проект.