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. Перед використанням перевірте ліцензію.
Для кого
Для вебдизайнерів, front-end розробників, фахівців із доступності та студентів, які вивчають 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 для звичайного й великого тексту оновлюється зі зміною кольорів.

  • Download font

    Завантажує файл із джерела @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 — безкоштовно