Как найти шрифты с Chrome & Firefox DevTools

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

Chrome DevTools - Отображаемые шрифты

  1. 1Кликните правой кнопкой мыши на любой текст и выберите «Просмотреть код» (или нажмите Ctrl+Shift+I / Cmd+Option+I).
    Контекстное меню Chrome с выделенным пунктом «Просмотреть код»
    Просмотреть полный скриншот
    Кликните правой кнопкой на текст, затем выберите «Просмотреть код»
  2. 2Chrome откроет панель «Элементы» с уже выделенным элементом в дереве DOM.
  3. 3В правой панели нажмите на вкладку «Вычисленные» (вторая вкладка, рядом со «Стили»).
  4. 4Прокрутите ниже CSS-свойств до раздела «Отображаемые шрифты».
    Вкладка Вычисленные Chrome DevTools с разделом Отображаемые шрифты: Inter Variable из файла woff2
    Просмотреть полный скриншот
    Вкладка Вычисленные - прокрутите до «Отображаемые шрифты», чтобы увидеть активную гарнитуру
  5. 5Вы увидите точную гарнитуру, используемую браузером, загруженный исходный файл и количество отображённых глифов.

Firefox DevTools - Вкладка Шрифты

  1. 1Кликните правой кнопкой мыши на любой текст и выберите «Исследовать элемент» (или нажмите F12). Откроется панель Инспектора.
  2. 2В правой панели Инспектора (где обычно отображаются Правила и Вычисленные) нажмите на вкладку «Шрифты».
  3. 3В левом столбце перечислены все шрифты, загруженные на странице. Нажмите на название шрифта, чтобы увидеть образец, диапазон насыщенности, формат и URL источника.
    Вкладка Шрифты Firefox DevTools - выбран Inter Variable с образцом и деталями
    Просмотреть полный скриншот
    Вкладка Шрифты Firefox - все шрифты страницы слева, детали справа

Ограничения подхода с DevTools

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

Быстрее: сканировать всю страницу по URL

Вставьте любой URL и получите полный список всех веб-шрифтов - каждое правило @font-face, импорт Google Fonts и ссылку CDN - за один скан.

Часто задаваемые вопросы

Что такое "Отображаемые шрифты" в Chrome?

«Отображаемые шрифты» показывает фактическую гарнитуру, использованную браузером для отрисовки выделенного текста - после применения запасных вариантов font-family. Может отличаться от объявления CSS font-family.

Почему отображаемый шрифт отличается от font-family в CSS?

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

Могу ли я найти все шрифты на странице с помощью DevTools?

Вкладка «Шрифты» Firefox показывает все загруженные шрифты. Chrome требует инспекции элементов по одному. Для полного автоматизированного инвентаря используйте URL-сканер выше.

Обнаруживает ли URL-сканер также Google Fonts?

Да - все источники шрифтов обнаруживаются: Google Fonts, Bunny Fonts, Fontshare и самостоятельно размещённые шрифты @font-face.

Вернуться к проверке шрифтов