Бесплатный онлайн-инструмент

Какие шрифты использует сайт

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

Основной шрифт страницы

Подключённые веб-шрифты (@font-face)

Семейство	Начертания	Форматы	Откуда грузится

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

Вставьте адрес страницы и нажмите «Определить». Шрифты на разных страницах одного сайта обычно совпадают, поэтому достаточно главной.
Наверху — шрифт, которым набрана большая часть текста. Полоса под ним показывает, как текст страницы делится между семействами.
В списке у каждого шрифта: доля текста в процентах, где он стоит (заголовки или основной текст), теги и полный стек с запасными вариантами.
В таблице — веб-шрифты, объявленные через @font-face: начертания, форматы файлов и источник (свой сервер, Google Fonts, Adobe Fonts).

Что показывает доля шрифта

Доля считается по символам видимого текста в HTML: если заголовки набраны одним шрифтом, а абзацы другим, доли отразят это соотношение. Так видно, какой шрифт на сайте основной, а какой акцентный. Текст внутри скриптов, скрытых блоков и SVG не учитывается.

Если на странице остался «шрифт браузера по умолчанию», значит часть текста не покрыта ни одним правилом font-family и у посетителей покажется Times New Roman или системный шрифт. Для своего сайта это повод проверить стили.

Зачем это нужно

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

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

Нужен сайт с продуманной типографикой? Напишите нам — подберём шрифты под бренд и посчитаем стоимость.

Частые вопросы

Как инструмент узнаёт шрифты сайта?

Он загружает страницу и все её файлы стилей, находит правила с font-family, применяет их к элементам страницы по тем же законам, что и браузер (специфичность, порядок, !important), и считает, сколько символов видимого текста набрано каждым семейством. Так получается доля шрифта на странице.

Что значит «веб-шрифт», «системный» и «нет @font-face»?

Веб-шрифт подключён через @font-face: его файлы загружаются с сервера сайта или сервиса вроде Google Fonts, и все посетители видят одно и то же. Системный шрифт (Arial, Georgia, Segoe UI) берётся из операционной системы, файл не грузится. Если семейство указано в CSS, но @font-face для него нет, шрифт увидят только те, у кого он установлен, остальным покажется запасной из стека.

Почему шрифт определился неверно или не определился?

Инструмент читает HTML и CSS, но не выполняет скрипты. Если сайт рисует интерфейс на React или Vue без серверного рендеринга, текста в HTML почти нет, и считать нечего. Шрифты, которые назначает JavaScript, и правила с псевдоклассами состояний (:hover) тоже не учитываются. Файлы стилей, закрытые от ботов, инструмент загрузить не сможет и сообщит об этом.

Как узнать, где скачать найденный шрифт?

В блоке «Подключённые веб-шрифты» видно, откуда грузятся файлы. Если это Google Fonts, шрифт бесплатный и доступен на fonts.google.com. Если с сервера сайта, посмотрите лицензию: многие коммерческие шрифты (например, Proxima Nova, Circe) нельзя брать без покупки.

Можно ли определить шрифт по картинке?

Нет, этот инструмент работает только с кодом сайта. Для картинок подойдут сервисы распознавания шрифтов по изображению, например WhatTheFont.

Это законно?

Да. Инструмент читает только то, что сайт сам отдаёт любому посетителю: HTML и CSS. Он не получает доступ к серверу, админке или файлам шрифтов за пределами публичных ссылок.