«Список всех шрифтов» сканирует любую веб-страницу и представляет полный реестр каждого используемого семейства шрифтов — веб-шрифты, загруженные из CDN, шрифты на собственном хостинге и системные резервные шрифты. Для каждого шрифта отображается предпросмотр живого текста, загруженные начертания и стили, количество элементов, использующих его, и копирование CSS-объявления font-family одним нажатием.
Раньше, чтобы определить шрифты на понравившемся сайте, нужно было проверять элементы один за другим в DevTools, смотреть вычисляемое свойство font-family или использовать расширения браузера, которые обнаруживают только один шрифт за раз. «Список всех шрифтов» показывает полную картину в одном виде — каждый шрифт, загруженный и используемый на странице, с живыми текстовыми образцами, демонстрирующими точное отображение каждого шрифта. Инструмент различает веб-шрифты (загруженные через @font-face или Google Fonts) и системные шрифты (Arial, Helvetica, Georgia и др.), показывая полный стек font-family. Для каждого шрифта вы видите загруженные начертания (400, 600, 700), элементы, которые его используют, и применяемые font-size. Нажмите на любой шрифт, чтобы скопировать его CSS-объявление — готово к вставке в ваш проект. Живой предпросмотр использует реальное отображение шрифта со страницы, а не обобщённый пример, поэтому вы видите именно то, как шрифт выглядит при тех размерах и начертаниях, которые применяются на сайте.
Перечисляет каждое семейство font-family, реально отображаемое на странице, включая веб-шрифты из Google Fonts, Adobe Fonts или пользовательских @font-face-объявлений, а также системные резервные шрифты. Показывает общее количество найденных уникальных семейств шрифтов.
Каждый шрифт отображается с живым текстовым образцом («The quick brown fox jumps over the lazy dog»), отрисованным с помощью реального файла шрифта, загруженного на странице. Вы видите реальное отображение — не обобщённый предпросмотр.
Для каждого шрифта смотрите, какие начертания загружены (Regular 400, Medium 500, SemiBold 600, Bold 700) и доступны ли курсивные варианты. Помогает понять загруженное подмножество шрифта.
Смотрите, сколько элементов на странице используют каждый шрифт. Наиболее используемый шрифт отображается первым. Узнайте, какие шрифты основные (основной текст), а какие второстепенные (используются лишь в нескольких элементах).
Нажмите на любую запись шрифта, чтобы скопировать полное CSS-объявление font-family (например, font-family: 'Inter', sans-serif) в буфер обмена. Готово к вставке прямо в вашу таблицу стилей.
Для каждого шрифта указан его источник: Google Fonts (с конкретным URL), Adobe Fonts, собственный хостинг (с URL @font-face) или системный шрифт. Знайте точно, откуда берётся каждый шрифт.
Зайдите на сайт с красивой типографикой и мгновенно увидите каждый используемый им шрифт — названия, начертания и источники. Никакого гадания «что это за шрифт?» и ненадёжных инструментов для идентификации шрифтов.
Сколько шрифтов загружает ваша страница? Есть ли неиспользуемые шрифты, которые скачиваются, но не применяются? «Список всех шрифтов» показывает реальное использование — если у загруженного шрифта 0 элементов, это впустую потраченный трафик.
Документируйте типографику проекта, запуская «Список всех шрифтов» на каждой странице. Убедитесь, что правильные шрифты и начертания используются единообразно по всему сайту — отловите посторонние объявления font-family.
Нашли понравившийся шрифт, но он платный? Скопируйте название шрифта и поищите бесплатные альтернативы с похожими характеристиками. Живой предпросмотр поможет точно вспомнить, как он выглядел.
Запустите «Список всех шрифтов» на одной и той же странице в разных браузерах, чтобы убедиться, что везде отображаются одинаковые шрифты. Системные стеки font-family разрешаются по-разному в разных операционных системах — выявляйте несоответствия.
Откройте плавающую панель DevSuite Pro и нажмите на иконку «Список всех шрифтов». Инструмент сканирует вычисляемые стили страницы и правила @font-face.
Панель отображает все шрифты, найденные на странице, отсортированные по частоте использования. Каждая запись показывает название шрифта, предпросмотр текста, начертания и количество элементов.
Прокручивайте живые предпросмотры, чтобы увидеть, как отображается каждый шрифт. Сравнивайте шрифт заголовков, основного текста и акцентный шрифт страницы.
Нажмите на любую запись шрифта, чтобы скопировать его CSS-объявление font-family. Нажмите на ссылку источника, чтобы перейти к происхождению шрифта (страница Google Fonts, URL CDN и т. д.).
Вставьте объявление font-family в ваш CSS и загрузите шрифт из того же источника, чтобы использовать его в собственном проекте.
Установите DevSuite Pro бесплатно и разблокируйте более 39 инструментов разработчика для вашего браузера.
