Поиск шрифта по сайту: где смотреть CSS и файлы

Поиск шрифта по сайту выполняют через инструменты разработчика браузера: сначала проверяют свойство font-family в CSS и Computed Styles, затем в Network находят фактически загруженный файл WOFF или WOFF2. Такой способ помогает определить гарнитуру, начертание, вес и понять, используется ли веб-шрифт или системный запасной вариант.

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

Исходный CSS дает более точный ответ: в нем указана цепочка font-family, а в вычисленных стилях видно, какие параметры получил конкретный элемент. Панель Network дополняет проверку и показывает, какой файл шрифта браузер действительно запросил. Поэтому исследование сайта лучше проводить в трех точках: CSS, рассчитанные стили и сетевые запросы.

Откройте страницу, нажмите правой кнопкой мыши на текст и выберите пункт просмотра кода или проверки элемента. В панели Elements найдите выбранный узел, например заголовок или абзац. Справа в разделе Styles будет правило с font-family. Запись вида font-family: Inter, Arial, sans-serif; означает, что сайт сначала пытается применить Inter, а затем переходит к запасным вариантам.

Раздел Computed показывает итоговые CSS-значения после каскада, наследования и применения более специфичных правил. Это важно, если свойство font-family объявлено в нескольких файлах или переопределяется для мобильной версии. Проверяйте не только body, но и сам элемент: кнопка, логотип, меню и основной текст могут иметь разные гарнитуры.

Если в Computed указана длинная цепочка шрифтов, это еще не доказывает, что первый вариант реально отображается. Браузер использует первый доступный шрифт, поддерживающий нужные символы. Для окончательной проверки сопоставьте рассчитанный стиль с загруженным ресурсом в Network и обратите внимание на начертание и вес.

Откройте DevTools, перейдите во вкладку Network и перезагрузите страницу. Используйте фильтр Font, если он доступен, или введите в поле поиска расширение файла. В списке могут появиться ресурсы с расширениями .woff2, .woff, .ttf или .otf. Самым распространенным форматом для веб-подключения обычно является WOFF2, но конкретный сайт может использовать несколько вариантов для совместимости.

Откройте найденный запрос и проверьте его имя, адрес, тип содержимого и статус ответа. Имя файла иногда содержит название гарнитуры и веса, например название с обозначением Regular, Medium, Bold или Italic. Однако полагаться только на имя нельзя: файл может быть переименован, сокращен или собран в составе набора.

В источниках CSS найдите правило @font-face. Внутри обычно указаны font-family, font-style, font-weight и src с адресом файла. Например, font-weight: 700 и font-style: normal связывают конкретный ресурс с жирным обычным начертанием. Если в HTML есть preload для шрифта, это лишь подсказка браузеру загрузить ресурс раньше; она не заменяет проверку фактического применения.

Сайт может подгружать шрифты из отдельного CDN, пакета интерфейсных компонентов или внешнего сервиса. Поэтому файл способен находиться не рядом с основными стилями проекта. Сетевой запрос показывает реальный источник ресурса, а CSS объясняет, к какой гарнитуре и какому весу этот ресурс относится.

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

В Styles и Computed найдите font-family, font-size, font-style, font-weight и line-height. Название гарнитуры ищите в первом значении font-family, но учитывайте всю цепочку fallback. Вес 400 обычно соответствует обычному начертанию, 700 — жирному, однако веб-шрифт может иметь собственную систему весов или переменную ось.

Рядом с CSS-декларацией браузер показывает имя файла и строку, где она задана. Перейдите по ссылке на таблицу стилей и найдите соседние правила @font-face. Если декларация пришла из встроенного стиля или сжатого файла, используйте поиск по словам font-family, font-face и src.

Перезагрузите страницу с открытой вкладкой Network и отфильтруйте запросы по типу Font. Сопоставьте имя ресурса с параметрами @font-face. Если нужный файл отсутствует, проверьте, не загружается ли он после действия пользователя, открытия модального окна или перехода в другой раздел сайта.

Сравните гарнитуру, стиль и вес элемента с параметрами найденного правила. Ошибка часто возникает, когда исследователь видит файл Bold, но выбранный текст имеет font-weight: 400. Если браузер не получил ресурс из-за ошибки, блокировки или несовпадения символов, фактическое отображение может перейти на резервный шрифт.

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

Представим правило font-family: Montserrat, Arial, sans-serif. В Styles видно Montserrat, но в Network нет ни одного файла с этим названием. Возможны два объяснения: гарнитура подключается под измененным именем или ресурс не загрузился. Откройте @font-face и проверьте src; если правило отсутствует, браузер, вероятно, показывает Arial либо другой системный шрифт.

В проекте могут быть файлы семейства с обозначениями Regular, Medium и Bold. Они не являются разными гарнитурами, если в @font-face для них указано одно имя font-family, а отличаются параметром font-weight. При подборе шрифта для дизайна важно сохранить и семейство, и нужное начертание, иначе текст будет выглядеть слишком тонким или искусственно утолщенным.

На странице может загружаться шрифт для скрытого блока, будущего состояния интерфейса или другого языка. Сам факт появления ресурса в Network не доказывает, что он применяется к выбранному тексту. Связку подтверждают три признака: соответствующее font-family в Computed, подходящие font-weight и font-style, а также правило @font-face с тем же семейством.

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

Variable font — это файл, способный хранить диапазон значений, например веса от 100 до 900, вместо отдельного файла для каждого начертания. В CSS его описывают через диапазон font-weight или другие оси. Поэтому название ресурса может не содержать слова Bold, хотя браузер использует визуально жирный вариант через вычисленное значение.

Иконочный шрифт предназначен для отображения пиктограмм и подключается через псевдоэлементы или специальные классы. Его можно найти в Network рядом с обычными веб-шрифтами, но использовать как шрифт для текста нельзя: в файле могут отсутствовать буквы, а кодовые позиции символов будут соответствовать иконкам.

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

Да, обычно достаточно инструментов разработчика браузера. В Computed Styles отображаются рассчитанные свойства элемента, включая font-family, а в Network можно увидеть загруженные файлы веб-шрифтов. Однако закрытые, локальные или динамически сформированные данные иногда не позволяют определить исходное название со стопроцентной точностью.

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

Найдите у элемента значение font-weight, затем сопоставьте его с правилом @font-face. Для веса 700 обычно используется объявление с font-weight: 700, но в variable font может быть указан диапазон. Имя файла помогает сориентироваться, однако решающим остается CSS-сопоставление, а не название ресурса.

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

Проверьте фильтр запросов, перезагрузите страницу и убедитесь, что DevTools был открыт до загрузки ресурса. Шрифт может быть системным, находиться в кэше, загружаться после действия пользователя или отображаться под необычным именем. Дополнительно выполните поиск по CSS-правилам font-face и src.

Включите эмуляцию мобильного устройства в DevTools и проверьте элемент в измененном viewport. Адаптивные стили могут назначать другую гарнитуру, вес или размер, а отдельные компоненты могут загружаться только на мобильном экране. После смены режима обновите страницу и повторите проверку Computed и Network.

Надежный поиск шрифта по сайту строится на сопоставлении трех источников: свойства конкретного элемента в Computed Styles, правила @font-face в CSS и реального запроса файла в Network. Такой подход помогает отличить основную гарнитуру от fallback, определить начертание и не перепутать текстовый или иконочный шрифт.

Если найденная гарнитура вдохновила вас на собственную типографику, создайте свой шрифт на fontgenerator.ru и используйте его в личном или коммерческом проекте с учетом выбранных условий применения.