Как узнать шрифт на сайте: Inspect Element и расширения

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

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

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

Инспектор — встроенный инструмент любого современного браузера, который показывает HTML, CSS и загруженные ресурсы страницы. Он позволяет быстро увидеть свойство font‑family и другие параметры шрифта.

Шаги:

1. Откройте страницу, где находится нужный текст.
2. Выделите фрагмент текста и кликните правой кнопкой мыши.
3. В контекстном меню выберите «Инспектировать».

4. В открывшейся панели перейдите на вкладку «Computed» или «Вычесляемые» стили.
5. Прокрутите до раздела font‑family — там видно название шрифта и стек запасных шрифтов.

Подсказки:

• Иногда сайт использует несколько правил CSS с разными приоритетами — проверяйте блоки «Computed» и «Styles».
• Если shрифт загружается через @font‑face или сервисы типа Google Fonts, в секции Network → Fonts вы увидите загружаемые файлы.

Быстрый режим инспектора

1. Нажмите Ctrl + Shift + C (Cmd + Shift + C на macOS).
2. Наведите курсор на текст — инспектор покажет стиль, размер, цвет и отступы.

Список всех шрифтов на странице

1. Откройте DevTools: Ctrl + Shift + I (Cmd + Shift + I на macOS).
2. Перейдите на вкладку Network и выберите фильтр Fonts.
3. Обновите страницу — вы увидите загружаемые шрифтовые файлы.

Важно: иногда шрифт встроен в графику или является частью SVG — тогда нужно использовать другие методы.

Определение шрифтов с помощью расширений браузера

Если хотите быстрее и визуальнее: установите расширение‑определитель шрифтов. Самые популярные — WhatFont и Font Finder. Они показывают имя шрифта по наведению и дополнительные параметры.

WhatFont — быстро и удобно

WhatFont показывает имя шрифта при наведении и открывает всплывающее окно с деталями после клика.

1. Включите расширение WhatFont в браузере.
2. Наведите на текст — отобразится имя шрифта.
3. Кликните для подробной информации (размер, цвет, начертание).

Вы можете выбрать несколько фрагментов на странице и сравнить шрифты.

Ссылка на загрузку: WhatFont для Chrome | Firefox | Safari (бесплатно)

Font Finder — для более технического анализа

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

Как протестировать замену шрифта:

1. Выделите текст на странице.
2. Кликните правой кнопкой и выберите Font Finder.

3. В поле Replace font with введите имя шрифта (например, ‘Calibri’) и примените — вы увидите изменения в превью.

4. Чтобы вернуть исходный вид — просто обновите страницу.

Ссылка на загрузку: FontFinder для Chrome | Edge | Firefox (бесплатно)

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

Для текста, который является частью изображения, браузерные инструменты обычно бесполезны. Здесь помогают сервисы распознавания шрифтов: WhatTheFont, WhatFontIs, FontSquirrel, Fontspring и другие.

Пример с WhatTheFont:

1. Скачайте изображение с текстом или сохраните ссылку.
2. Загрузите картинку в WhatTheFont.

3. Сервис автоматически найдёт текст и предложит рамку обрезки. Подстройте кадр так, чтобы вокруг был только нужный текст и нажмите кнопку продолжить.

4. WhatTheFont сравнит образец с базой и покажет похожие шрифты. При необходимости открывайте «Показать больше результатов».

Советы по качеству распознавания:

• Чем выше контраст текста и фона, тем точнее результат.
• Лучше использовать горизонтальные фрагменты с отдельными буквами, а не сильно искажённые логотипы.
• Иногда сервис подбирает похожие коммерческие шрифты — проверьте лицензию перед использованием.

Практическая методика: как безопасно использовать найденный шрифт

Мини‑методика из 6 шагов для дизайнеров и разработчиков:

1. Идентифицируйте шрифт (Инспектор или расширение).
2. Если шрифт загружается как внешний ресурс, проверьте его лицензию (Google Fonts, Adobe Fonts, коммерческий файл).
3. Тестируйте в нескольких браузерах и на разных разрешениях экрана.
4. Примените запасные шрифты в font‑stack (например, ‘Open Sans’, ‘Arial’, sans‑serif).
5. Проверьте доступность: контраст, читаемость при малых размерах, поддержка кириллицы.
6. Документируйте источник и лицензию в дизайн‑спеке.

Пример CSS, безопасный для продакшна:

body {
  font-family: 'Open Sans', 'Arial', sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

Важно: не копируйте платные шрифты без лицензии. Если шрифт коммерческий, рассмотрите покупку или замену на бесплатный аналог.

Когда эти методы не работают и что делать

Примеры ситуаций и решения:

• Текст в виде растрового изображения или векторного логотипа — используйте распознавание по изображению и ручное сопоставление.
• Шрифт сильно модифицирован дизайнером (кастомные кернинг/глифы) — полностью совпадение может не найтись; ищите ближайшие по ключевым символам.
• Шрифт защищён DRM или встроен в веб‑шрифт в особом формате — найдите лицензионную информацию у автора сайта или в исходниках.

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

• Веб‑архивы и Git: если сайт с открытым кодом, посмотрите репозиторий — шрифты часто подключены через package.json или CSS.
• Обратитесь к разработчику сайта через контактную форму — иногда проще спросить напрямую.
• Используйте инструменты скриншота + подбор шрифтов вручную по ключевым символам (а, g, t — часто характерные формы).

Роль‑ориентированные чек‑листы

Дизайнер:

• Получил название шрифта и проверил вес/варианты.
• Проверил поддержку кириллицы и диакритики.
• Оценил визуальную сочетаемость со стилем сайта.
• Документировал лицензию.

Верстальщик:

• Проверил загрузку файла в Network → Fonts.
• Настроил font‑display для оптимальной загрузки.
• Добавил корректный font‑stack.

Маркетолог:

• Оценил читаемость в тексте объявлений и баннеров.
• Проверил, можно ли использовать шрифт в брендинге.

Разработчик:

• Проверил корректность MIME‑типа и CORS при загрузке шрифтов.
• Настроил кеширование и оптимизацию форматов (woff2, woff).

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

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

Быстрые эвристики и mental models

• “Самый частый шрифт — первый в font‑family” — часто верно, но браузер использует первый доступный шрифт из списка.
• “Похожий шрифт часто решает задачу” — если оригинал платный или кастомный, ищите ближайший по ключевым буквам.
• “Проверить Network → Fonts” — это быстрый путь увидеть загружаемые файлы.

Маленькая факто‑панель

• Инструменты: DevTools, WhatFont, Font Finder, WhatTheFont.
• Форматы шрифтов в сети: woff2, woff, ttf, otf.
• Важная проверка: лицензионное использование и поддержка нужных языков.

Малый шаблон для документации шрифта (копируемый)

Decision flowchart (Mermaid)

flowchart TD
  A[Нужно узнать шрифт?] --> B{Источник текста}
  B -->|Текст на странице| C[Открыть Инспектор]
  B -->|Текст в картинке| D[Загрузить в WhatTheFont]
  C --> E{Показан font-family?}
  E -->|Да| F[Скопировать название и проверить лицензию]
  E -->|Нет| G[Использовать расширение WhatFont / Font Finder]
  G --> F
  D --> H{Совпадение найдено?}
  H -->|Да| F
  H -->|Нет| I[Подобрать похожий шрифт вручную]

Краткий глоссарий

• font‑family — CSS‑свойство, перечисляющее семейства шрифтов и запасные варианты.
• webfont — шрифтовой файл, специально подготовленный для веб‑загрузки (woff/woff2).
• kerning — межбуквенный интервал, часто настраивается дизайнером.

Риски и рекомендации

• Риск нарушения лицензии: не используйте платные шрифты без покупки. Рекомендация: всегда проверяйте лицензию и условия распространения.
• Риск несовместимости языков: проверьте поддержку кириллицы и диакритики.
• Производительность: тяжёлые webfonts замедляют загрузку страницы — используйте woff2 и font‑display: swap.

Итог

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

Краткие выводы:

• Инспектор и Network → Fonts показывают большинство веб‑шрифтов.
• WhatFont и Font Finder ускоряют задачу и удобны для сравнения.
• Для изображений используйте WhatTheFont и аналоги.
• Проверьте лицензию и производительность перед использованием шрифта в дизайне.