Как распознать шрифт на сайте без исходного макета

Распознать шрифт на сайте можно без исходного макета: достаточно проверить CSS-стили элемента, посмотреть, какие файлы шрифтов загружает браузер, и сопоставить найденное семейство с реальным начертанием. В статье разберём пошаговую проверку, визуальные признаки, расширения, типичные ошибки и способы подтвердить результат.

Запрос «какой шрифт используется на сайте» может означать несколько разных задач. Нужно найти семейство, например Inter или Georgia, определить начертание — обычное, полужирное или курсивное — и понять, применяется ли отдельный файл для кириллицы. Иногда сайт использует один шрифт для заголовков, другой для основного текста, а системный шрифт оставляет для кнопок или интерфейсных элементов.

Важно отличать название, записанное в CSS, от того, что реально отображается на экране. Свойство font-family содержит цепочку запасных вариантов. Если первый шрифт не загрузился, браузер переключается на следующий. Поэтому строка вроде «Inter, Arial, sans-serif» показывает намерение разработчика, но не всегда доказывает, что пользователь видит именно Inter.

Для первичной проверки подойдёт встроенный инспектор браузера. Откройте нужную страницу, наведите указатель на текст, нажмите правую кнопку мыши и выберите пункт, связанный с просмотром кода или исследованием элемента. В панели разработчика будет выделен HTML-элемент, а рядом появятся применённые CSS-правила.

Найдите в перечне стилей свойства font-family, font-size, font-weight, font-style и line-height. Первое отвечает за семейство, второе — за размер, третье — за насыщенность, четвёртое — за курсив, а межстрочный интервал помогает проверить визуальное сходство. Если правило зачёркнуто, оно переопределено другим стилем и не является действующим.

В таблице стилей могут одновременно находиться правила от темы, компонентов, медиазапросов и подключённых библиотек. Вычисленные свойства показывают итог, который браузер применил к выбранному элементу с учётом наследования и переопределений. Это особенно важно для адаптивных страниц: на мобильном экране заголовок может использовать другое семейство или другое начертание.

После просмотра CSS проверьте сетевые запросы страницы. В инструментах разработчика откройте раздел, где отображаются загруженные ресурсы, и отфильтруйте их по типу Font или по расширениям woff, woff2, ttf и otf. Современные сайты чаще используют веб-форматы WOFF и WOFF2, потому что они предназначены для передачи шрифтов через интернет.

Имя файла может помочь, но не всегда является доказательством. Разработчик способен переименовать файл в нейтральное обозначение, объединить несколько начертаний или использовать подмножество только с латиницей или кириллицей. Смотрите на связку данных: имя ресурса, правило font-face, значение font-family и соответствие толщины текста.

Правило @font-face обычно содержит семейство, адрес файла, стиль и диапазон насыщенности. Если для одного семейства перечислены отдельные файлы с диапазонами weight, сайт может использовать переменный шрифт. В таком случае одно подключение поддерживает несколько значений толщины, а визуальный результат зависит от конкретного CSS-правила.

Не ограничивайтесь одной буквой или коротким словом. Выберите заголовок с крупными знаками, обычный абзац и, если возможно, текст на кириллице. Разные размеры и насыщенность могут создавать впечатление разных гарнитур. Для русскоязычного сайта особенно полезны буквы «Д», «Ж», «Й», «ф», «т» и «б»: их форма часто заметно различается у близких по стилю шрифтов.

Откройте действующие стили выбранных элементов и запишите семейство, толщину, стиль и размер. Если значение font-family задано у родительского блока, проверьте наследование. Если в правиле указана цепочка из нескольких названий, не принимайте первое слово за окончательный ответ до проверки загрузки ресурса.

Найдите ресурс шрифта в сетевой панели или в исходных стилях. Сравните его с параметрами @font-face. Например, файл с обозначением 700 обычно связан с полужирным начертанием, но ориентироваться нужно на CSS-свойство weight, а не только на имя файла. Один и тот же файл может быть переименован или содержать переменный диапазон насыщенности.

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

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

Визуальный анализ полезен, когда CSS скрыт, шрифт встроен в изображение или сайт отдаёт непонятно названные файлы. Сначала определите общую классификацию: шрифт с засечками, гротеск, гуманистический или геометрический санс-сериф, моноширинный или декоративный. Затем смотрите на детали, которые сохраняются при разных размерах.

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

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

Сервисы распознавания по изображению подходят для логотипов, баннеров и скриншотов, где нельзя открыть DOM или CSS. Загрузите чёткий фрагмент с несколькими символами, обрежьте лишний фон и проверьте предложенные варианты в тестере. Чем сильнее искажены буквы, тем выше вероятность получить похожее семейство вместо точного совпадения.

Вы выбираете абзац и видите в вычисленных свойствах цепочку «Inter, Arial, sans-serif», а в сетевой панели находите файл WOFF2, связанный с Inter и диапазоном weight 400. Это сильное подтверждение, что обычный текст отображается Inter. Для заголовка нужно провести отдельную проверку: он может использовать тот же family, но weight 700 или другую гарнитуру.

Файл называется font-3.woff2, но CSS связывает его с семейством Brand Sans и диапазоном веса от 300 до 800. В этой ситуации имя файла не помогает распознаванию. Ориентируйтесь на правило @font-face, применённое значение font-family и визуальное сравнение нескольких начертаний, включая кириллицу.

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

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

Третья ошибка — путать начертание с отдельным шрифтом. Полужирный вариант того же семейства может восприниматься как другая гарнитура, особенно при крупном кегле. Четвёртая — игнорировать состояние загрузки: при медленном соединении сначала показывается системный шрифт, а затем происходит замена на веб-шрифт.

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

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

Выберите текст, откройте инструменты разработчика и найдите вычисленное свойство font-family. Затем проверьте font-weight, правило @font-face и загруженный файл в сетевой панели. Такой способ позволяет увидеть не только название семейства, но и понять, какое начертание реально применяется.

Расширение может считывать первый вариант в списке font-family, даже если файл не загрузился или не содержит нужных символов. Браузер в таком случае использует резервное семейство. Проверьте сетевые ресурсы, наличие кириллицы и результат после отключения или включения подключённого веб-шрифта.

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

Проверьте диапазон значений в правиле @font-face и фактический font-weight элемента. Переменный шрифт может поддерживать множество промежуточных толщин, поэтому имя файла не обязано содержать конкретное значение вроде 400 или 700. Для сравнения зафиксируйте не только семейство, но и точную насыщенность.

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

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