FontLens

Бесплатное расширение для Chrome

Какой шрифт на сайте? Правый клик — и виден CSS

Выделите текст на любом сайте, нажмите правой кнопкой и выберите «Inspect font with FontLens». Поверх страницы откроется инспектор шрифтов: семейство, размер, начертание, межстрочный интервал и цвет, готовый CSS и кнопка для скачивания шрифта.

Установить в Chrome — бесплатно

Работает и в Edge, Brave, Opera, других браузерах на Chromium.

Инспектор FontLens: образец Ag между линиями высоты прописных, высоты строчных и базовой линией, свойства шрифта и сниппет Tailwind

Коротко

Что делает
Показывает шрифт выделенного текста: семейство, размер, начертание, межстрочный интервал, цвет и стили, которые отличаются от стандартных, — с готовым CSS.
Как запустить
Выделите текст, нажмите правой кнопкой и выберите «Inspect font with FontLens». Пункт меню появляется, только когда текст выделен.
Форматы
CSS, SCSS, SASS или Tailwind, размер в px, rem, pt или em.
Файл шрифта
Кнопка «Download font» скачивает веб-шрифт из его источника в @font-face. Перед использованием проверьте лицензию шрифта.
Для кого
Веб-дизайнеры, фронтенд-разработчики, специалисты по доступности и те, кто учит CSS.
Цена
Бесплатно. Без аккаунта и платной версии.
Данные
Работает в браузере. Без серверов и аналитики. Единственный запрос — скачивание шрифта, которое запускаете вы.
Где работает
Chrome и другие браузеры на Chromium, которые ставят расширения из Chrome Web Store. Не Firefox и не Safari.
Ограничения
Читает CSS настоящего текста на веб-страницах. Не текст на картинках, в canvas или PDF и не служебные страницы Chrome.
Версия
2.2.0, обновлено 23 октября 2026 г.

Два клика до шрифта

  1. 1

    Выделите текст

    Заголовок, абзац или подпись кнопки на любой странице.

  2. 2

    Правый клик

    Выберите «Inspect font with FontLens». Поверх страницы откроется инспектор: семейство, размер, начертание, интервал и цвет.

  3. 3

    Скопируйте или поменяйте

    Скопируйте CSS или Tailwind, попробуйте другой размер или цвет в живом превью или скачайте файл шрифта.

Зачем его открывают

Aa

Узнать шрифт

Понравился заголовок? Выделите его и посмотрите семейство, начертание и откуда шрифт: Google Fonts, Adobe Fonts или сам сайт.

{ }

Сверить с макетом

Сравните цифры на живой странице с дизайн-макетом и скопируйте правила как CSS, SCSS, SASS или Tailwind.

4.5:1

Проверить контраст

Посмотрите коэффициент контраста с отметками AA и AAA и попробуйте текст темнее или фон светлее, пока дизайн не ушёл в работу.

Что умеет

  • Образец с линиями

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

  • формата сниппета

    CSS, SCSS, SASS и Tailwind. Копируйте весь сниппет или одну строку; последний формат запоминается.

  • Ваши единицы

    Размер в px, rem, pt или em — и в полях, и в сниппете. rem считается от корневого размера шрифта страницы.

  • Источник шрифта

    Метка показывает, откуда шрифт: Google Fonts, Adobe Fonts, свой хостинг сайта или системный шрифт с вашего компьютера.

  • Проверка контраста

    Коэффициент контраста текста и фона с отметками AA и AAA для обычного и крупного текста — пересчитывается, когда вы меняете цвета.

  • Скачать шрифт

    Берёт файл из источника в @font-face и называет его по семейству. Если сервер блокирует запрос, источник откроется в новой вкладке.

Почему «какой это шрифт?» в DevTools ищется долго

Страница объявляет список шрифтов, а браузер берёт первый, который у него есть. Чтобы узнать какой, вы открываете DevTools, ищете элемент, читаете панель Computed, потом ищете файл шрифта на панели Network. Размер, начертание, интервал и цвет — в разных местах.

FontLens читает вычисленные стили выделенного текста и собирает их в одной панели: список семейств, образец первого, все числа, источник шрифта и CSS. Он читает CSS страницы, поэтому не распознаёт шрифт на картинке.

Ничего не уходит из браузера

  • Без аккаунта и серверов

    FontLens работает в вашем браузере. Без аналитики и отслеживания.

  • Читает только выделенное

    Инспектор читает стили текста, по которому вы кликнули правой кнопкой. Ничего о странице никуда не отправляется.

  • Четыре разрешения

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

Chrome DevTools и FontLens

Chrome DevTools и FontLensChrome DevToolsFontLens
Добраться до шрифта текстаПросмотреть код, найти элемент, открыть панель ComputedВыделить текст, правый клик, один пункт меню
Скопировать как Tailwind или SCSSНет, значения копируются по одномуВкладки CSS, SCSS, SASS и Tailwind
Откуда шрифтИскать файл шрифта на панели NetworkМетка: Google Fonts, Adobe Fonts, свой хостинг или системный
Скачать файл шрифтаНайти его в Network или Sources и сохранитьОдна кнопка
Проверка контрастаВ палитре цветов на панели StylesОтметки AA и AAA рядом с живым превью
ЦенаВстроеноБесплатно

Вопросы

Как узнать, какой шрифт используется на сайте?

Установите FontLens в Chrome, выделите текст на сайте, нажмите правой кнопкой и выберите «Inspect font with FontLens». Вы увидите семейство, размер, начертание, межстрочный интервал, цвет и источник шрифта.

Как скопировать CSS шрифта с сайта?

В инспекторе выберите вкладку CSS, SCSS, SASS или Tailwind и нажмите «Copy all» или скопируйте одну строку. Если нужно, сначала переключите единицы на px, rem, pt или em.

Можно ли скачать шрифт с сайта?

Если текст набран веб-шрифтом, кнопка «Download font» скачает файл из его источника в @font-face. У системного шрифта скачивать нечего. Перед использованием в своём проекте проверьте лицензию шрифта.

Распознаёт ли FontLens шрифт на картинке или в PDF?

Нет. Он читает CSS настоящего текста на веб-страницах, поэтому не определяет шрифты на картинках, в canvas или PDF.

Как проверить контраст текста по WCAG?

В превью показан коэффициент контраста цвета текста и фона с отметками AA и AAA для обычного и крупного текста. Поменяйте любой из цветов — отметки обновятся.

Можно ли показывать размеры в rem вместо px?

Да. Переключите единицы на px, rem, pt или em — поля и сниппет пересчитаются. rem считается от корневого размера шрифта страницы, а выбор запоминается.

Это бесплатно? Расширение собирает данные?

Бесплатно, без аккаунта. У него нет серверов и аналитики; единственный запрос — скачивание шрифта, которое запускаете вы.

Работает ли в Яндекс Браузере, Edge, Brave или Opera?

Большинство браузеров на Chromium ставят расширения из Chrome Web Store, в том числе Яндекс Браузер, Edge, Brave, Opera и Vivaldi. Firefox и Safari не поддерживаются.

Другие бесплатные расширения PYROCTAL

Что это за шрифт? Два клика.

Установить в Chrome — бесплатно