Как узнать шрифт на сайте: 5 способов от простого к сложному

Смотришь на чужой сайт — и понимаешь, что именно этот шрифт хочешь использовать в своём проекте. Но как его найти? Можно долго гадать или писать владельцу сайта. А можно потратить 30 секунд и узнать точное название. Вот пять способов — выбирайте тот, который подходит вашей ситуации.

Самый простой путь. Не нужно знать код, открывать инструменты разработчика или разбираться в CSS. Устанавливаете расширение — и нажимаете на любой текст на странице.

WhatFont

Бесплатное расширение для Chrome и Safari. После установки наведите курсор на любой текст — появится всплывающий блок с названием шрифта, его размером, насыщенностью, межстрочным интервалом и цветом. Если шрифт подключён через Google Fonts или Adobe Fonts, расширение покажет ссылку напрямую.

Подходит для: быстрой проверки шрифта на конкретном элементе.

Fonts Ninja

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

Подходит для: обзора всей типографики страницы.

Этот способ не требует ничего устанавливать — только открыть браузер.

Инспектор элементов (DevTools)

Нажмите Ctrl+Shift+I (или F12 на Windows, Cmd+Option+I на Mac) — откроется панель разработчика. Кликните на иконку курсора, затем — на нужный текст. В разделе Computed найдите свойство font-family — это и есть шрифт.

Там же можно посмотреть другие параметры типографики:

• font-size — размер шрифта в пикселях
• font-weight — насыщенность: 400 = обычный, 700 = жирный
• line-height — межстрочный интервал
• letter-spacing — межбуквенное расстояние

Если расширение поставить некогда, а DevTools открывать не хочется — есть онлайн-сервисы. Они работают по одному принципу: загружаете скриншот с текстом, сервис анализирует и предлагает совпадения из своей базы. Два основных сервиса описаны в следующем способе.

Сделайте скриншот с нужным текстом и загрузите на один из сервисов.

WhatTheFont

Самый известный инструмент. Загружаете картинку, сервис выделяет буквы и предлагает совпадения из базы. Лучше всего работает с латиницей — кириллицу распознаёт хуже.

WhatFontIs

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

У PDF нет DOM-структуры, которую можно открыть в DevTools. Поэтому здесь другой подход.

Через Adobe Acrobat

Файл → Свойства → вкладка «Шрифты». Здесь полный список всех шрифтов, использованных в документе.

Через браузер

Откройте PDF в Chrome, сделайте скриншот нужного текста, загрузите на WhatTheFont или WhatFontIs. Работает чуть медленнее, но вполне надёжно для распространённых шрифтов.

В Adobe Photoshop есть встроенный инструмент Match Font — он анализирует шрифт прямо на изображении.

Как пользоваться:

• Откройте изображение в Photoshop
• Выделите область с нужным текстом
• Меню Текст → Match Font

Фотошоп предложит похожие шрифты из базы Adobe и из тех, что установлены на вашем компьютере. Функция доступна начиная с CC 2015.

Расширения показывают базовые параметры, но самый полный набор — через DevTools. Откройте вкладку Computed и ищите:

• font-size — размер в пикселях
• line-height — межстрочный интервал
• font-weight — 400 = обычный, 700 = жирный
• letter-spacing — межбуквенное расстояние

Все значения указаны в вычисленном виде — уже с учётом всех CSS-правил страницы.