Как определить шрифт на сайте: инструменты и пошаговые методы

Если нужно быстро узнать, какой шрифт использует сайт, откройте Инспектор (Inspect) в браузере или установите расширение вроде WhatFont/Font Finder. Для текста в изображениях используйте онлайн‑сервисы распознавания шрифтов (WhatTheFont, WhatFontIs и т. п.). Ниже — подробные пошаговые инструкции, ограничения, рабочие чеклисты для дизайнеров и разработчиков и часто задаваемые вопросы.

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

Важно: ниже описанные методы не требуют навыков программирования. Все шаги работают в популярных браузерах (Chrome, Edge, Firefox, Safari), интерфейс может немного отличаться.

Как найти шрифт через Инспект (Inspect)

Инструмент Инспектора показывает HTML/CSS страницы и ресурсы, которые она загружает. Это самый прямой способ узнать семейство шрифтов, размер, межстрочный интервал и прочие свойства.

Короткая последовательность действий:

1. Откройте нужный сайт.
2. Найдите текст, шрифт которого хотите узнать.
3. Кликните по тексту правой кнопкой мыши и выберите Inspect (Инспектировать) в контекстном меню.
4. В открывшейся панели перейдите на вкладку Computed (Вычисленные) или Styles (Стили).
5. Прокрутите список свойств до секции font-family и font-size. Там увидите имя шрифта и список запасных шрифтов.

Полезные примечания:

• Если в font-family указана цепочка (например, “Roboto”, “Helvetica”, sans-serif), реальный шрифт на странице — первый доступный в этой цепочке, который браузер загрузил.
• Иногда полезно переключиться на вкладку Elements (Элементы) и посмотреть прямо на правило, где подключён шрифт (@font-face).

Быстрый режим через сочетание клавиш

1. Откройте страницу.
2. Нажмите Ctrl + Shift + C (Cmd + Shift + C на Mac).
3. Наведите курсор на интересующий текст. Инструмент подсветит элемент и покажет краткую информацию: размер шрифта, цвет, семейство и отступы.

Как посмотреть список всех шрифтов, загруженных страницей

1. Откройте сайт.
2. Нажмите Ctrl + Shift + I (Cmd + Shift + I на Mac) для открытия DevTools.
3. Перейдите на вкладку Network (Сеть).
4. В фильтрах выберите Font (Шрифты).
5. Обновите страницу, чтобы увидеть все запросы к файлам шрифтов (.woff, .woff2, .ttf, .otf).

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

Связано: Как изменить размер шрифта в Firefox

Расширения браузера для определения шрифтов

Если вы хотите ещё более удобный интерфейс, воспользуйтесь расширениями. Два самых популярных — WhatFont и Font Finder.

WhatFont

WhatFont быстр и прост: при включении наведите курсор на текст, и расширение покажет имя шрифта. Клик по тексту откроет всплывающую карточку с деталями: размер, цвет, стиль, источник.

1. Установите WhatFont для вашего браузера.
2. Активируйте расширение.
3. Наведите курсор на текст — появится подсказка с названием шрифта.
4. Кликните для подробностей.

Ссылки для скачивания: WhatFont для Chrome | Firefox | Safari (бесплатно)

Font Finder

Font Finder более детализирован и ориентирован на разработчиков. Он показывает CSS‑правила, заголовки @font-face, вес и стили, а также позволяет временно заменить шрифт на странице.

Применение Font Finder:

1. Выделите текст на странице.
2. Кликните правой кнопкой и выберите Font Finder в контекстном меню.
3. В появившейся панели можно просмотреть все свойства и даже выбрать Replace font with (Заменить шрифт на), чтобы протестировать визуал.

Ссылки для скачивания: FontFinder для Chrome | Edge | Firefox (бесплатно)

Определение шрифта в изображении

Если текст — это часть изображения (лого, баннер, скриншот), браузерные инспекторы бессильны. Для таких случаев существуют онлайн‑сервисы распознавания шрифтов.

Популярные сервисы: WhatTheFont, WhatFontIs, FontSquirrel Matcherator, Fontspring Matcher.

Пример работы с WhatTheFont:

1. Скачайте изображение с текстом.
2. Перейдите на WhatTheFont и загрузите изображение.
3. Инструмент автоматически выделит области с текстом. Подкорректируйте рамки, чтобы вокруг был только интересующий текст.
4. Нажмите стрелку или кнопку подтверждения — сервис покажет похожие шрифты из своей базы.

Если совпадение не найдено сразу, пробуйте обрезать изображение по‑разному или загрузить более крупный фрагмент. Некоторые сервисы предлагают платные версии с большей базой и точностью.

Связано: Лучшие сайты с бесплатными шрифтами

Когда методы не работают — ограничения и нюансы

Важно понимать, что не всегда можно однозначно определить шрифт:

• Текст преобразован в контур (outline) — тогда это не шрифт, а векторная графика.
• Шрифт сильно модифицирован или кастомизирован дизайнером.
• Подгружаемый шрифт был subset (обрезан) — в нём нет всех глифов, и сервисы могут некорректно распознать имя.
• Шрифт встроен в шифрованный формат или отпирается только серверной логикой.
• Веб‑шрифт доставляется в виде base64 прямо в CSS — его всё равно можно увидеть в DevTools, но имя может быть обфусцировано.
• Для изображений распознавание может не сработать из‑за низкого качества, сложных эффектов, перекоса или декоративных символов.

Если выяснить шрифт не получается, используйте похожие альтернативы по характеристикам (ширина, контраст, высота x‑height, наклон). Часто визуально близкий шрифт достаточно для прототипа.

Альтернативные подходы и эвристики

• Посмотрите исходный код: поиском по @font-face и URL можно найти имя и происхождение (Google Fonts, Adobe Fonts, локальный файл).
• Проверьте подключённые CSS‑файлы — иногда там есть подсказки (например, комментарии от дизайнера).
• Поиск по URL шрифта часто показывает, что это Google Fonts или другой CDN — в URL обычно встречается имя шрифта.
• Если сайт использует Adobe Fonts (Typekit), в коде будет ID проекта Typekit.
• Попробуйте связаться с владельцем сайта — многие дизайнеры охотно делятся используемыми семействами.

Практические чеклисты по ролям

Чеклист для дизайнера:

• Зафиксировать образцы текста (скриншоты) в разных размерах.
• Проверить, не превращён ли текст в контур.
• Если шрифт неизвестен, подобрать 2–3 визуально близких аналога.
• Убедиться в лицензионной совместимости для коммерческого использования.

Чеклист для фронтенд‑разработчика:

• Открыть DevTools → Network → Font и обновить страницу.
• Найти @font-face в CSS и проверить URL и формат (woff/woff2/ttf/otf).
• При необходимости скачать шрифт и проверить метаданные через fonttools или FontForge.
• Если шрифт загружается с внешнего CDN, проверить CORS‑политику.

Чеклист для QA:

• Проверить корректность отображения шрифтов на ключевых платформах (Windows, macOS, Android, iOS).
• Проверить состояние fallback‑шрифтов и доступность кириллицы/латиницы.
• Убедиться, что замена шрифта не ломает лэйаут.

Мини‑методология: быстрый рабочий процесс (1–2 минуты)

1. Наведите Ctrl + Shift + C и проверьте всплывающую подсказку — может быть достаточно.
2. Если нет — откройте Инспект и смотрите computed → font-family.
3. Перейдите во вкладку Network → Font и проверьте загружаемые файлы: имя, формат.
4. Если это изображение — скопируйте фрагмент и загрузите в WhatTheFont.
5. Если нужен точный ответ и методы не помогли — обратитесь к владельцу сайта или экспортируйте шрифт для анализа.

Критерии приёмки

Шрифт считается корректно идентифицированным, если выполнены все пункты:

• Название семейства шрифтов совпадает с тем, что загружается браузером (см. font-family или @font-face).
• Вес и стиль (например, Bold 700, Italic) соответствуют отображению.
• Формат шрифта подтверждён во вкладке Network (.woff, .woff2 и т. п.).
• Для изображений — найдена подходящая пара/замена с визуальным соответствием ≥95% по глазной проверке (субъективная оценка команды).

Безопасность и приватность при работе со шрифтами

• Подключение шрифтов с внешних CDN приводит к запросам к этим сервисам. Такие запросы могут включать IP и метаданные о браузере. Если политика конфиденциальности в вашей компании строгая, рассмотрите локальное хостингование шрифтов.
• При использовании сторонних расширений будьте внимательны к запрашиваемым правам. Лучше устанавливать расширения из официальных магазинов и проверять отзывы.

Форматы шрифтов и совместимость

• Основные веб‑форматы: WOFF, WOFF2 (оптимальны для веба), TTF/OTF (широко поддерживаются, больше по размеру).
• WOFF2 обеспечивает лучшее сжатие и поддерживается современными браузерами.
• Для старых браузеров может понадобиться резервный TTF.

Фактбокс: ключевые термины

• font-family — свойство CSS, которое задаёт семейство шрифтов.
• @font-face — правило CSS для подключения веб‑шрифтов.
• WOFF/WOFF2 — форматы веб‑шрифтов.
• Subsetting — удаление ненужных глифов для уменьшения размера шрифта.

Справочник терминов (одной строкой)

• Glyph — графический символ в шрифте.
• x‑height — высота строчных символов без учёта выносных элементов.
• Kerning — межбуквенный интервал между двумя конкретными символами.

Когда стоит использовать похожий шрифт вместо точного совпадения

• Если точный шрифт платный и лицензия не позволяет использование.
• Если шрифт сильно модифицирован и невозможно восстановить оригинал.
• В прототипах, где важно сохранить визуальную идею без покупки лицензии.

Часто задаваемые вопросы

Как узнать, использует ли сайт Google Fonts?

Посмотрите в DevTools → Network → Font или по запросам в Network: URL обычно содержит fonts.googleapis.com или fonts.gstatic.com.

Можно ли скачать шрифт прямо с сайта и использовать его в своём проекте?

Технически можно получить файл шрифта, но перед использованием проверьте лицензию. Многие веб‑шрифты защищены условиями использования и требуют покупки лицензии для распространения.

Что делать, если шрифт — часть логотипа и распознать его не удаётся?

Попробуйте распознать отдельные буквы в сервисах распознавания, либо обратитесь к профессиональному типографу для подбора визуально близкого аналога.

Примеры отказа от распознавания (когда методы провалятся)

• Логотип выполнен вручную и не основан на шрифтовом файле.
• Дизайнер изменил глифы так, что они потеряли связь с исходным семейством.
• Изображение имеет сильные эффекты (шум, тени, градиенты) и сервисы не выделяют контуры букв.

Шаблон: быстрый отчёт по шрифту (для команды)

Название проекта: URL страницы: Образец текста (размер/скриншот): Определённый шрифт (font-family): Формат и источник (woff/woff2, Google/Adobe/локально): Замена/альтернатива (если оригинал недоступен): Примечания по лицензии:

Если нужно, могу подготовить сокращённую версию этого руководства для рассылки команде (100–200 слов) или подготовить диаграмму принятия решений в формате Mermaid.