폰트렌즈

무료 Chrome 확장 프로그램

이 폰트 뭐지? 우클릭해 CSS를 확인하세요

웹사이트에서 텍스트를 선택하고 우클릭한 뒤 ‘Inspect font with FontLens’를 선택하세요. 페이지 위에 폰트 검사기가 열려 글꼴, 크기, 굵기, 줄 높이, 색상과 복사할 CSS를 보여 줍니다. 폰트 다운로드 버튼도 있습니다.

Chrome에 추가 — 무료

Edge, Brave, Opera 등 다른 Chromium 브라우저에서도 작동합니다.

폰트렌즈 검사기: 대문자 높이, x 높이, 기준선 가이드 사이의 Ag 견본과 폰트 속성, Tailwind 코드

한눈에 보기

기능
선택한 텍스트의 글꼴, 크기, 굵기, 줄 높이, 색상과 기본값에서 달라진 스타일을 보여 주며 CSS를 바로 복사할 수 있습니다.
시작 방법
텍스트를 선택하고 우클릭한 다음 ‘Inspect font with FontLens’를 선택하세요. 텍스트를 선택했을 때만 메뉴에 표시됩니다.
복사 형식
CSS, SCSS, SASS 또는 Tailwind. 크기 단위는 px, rem, pt, em 중에서 선택하세요.
폰트 파일
‘Download font’를 누르면 @font-face 출처에서 웹 폰트를 가져옵니다. 사용하기 전에 폰트 라이선스를 확인하세요.
추천 대상
웹 디자이너, 프런트엔드 개발자, 접근성 감사 담당자, CSS를 배우는 학생.
가격
무료. 계정 필요 없음, 유료 버전 없음.
데이터
브라우저에서 실행됩니다. 서버와 분석 기능이 없습니다. 직접 시작한 폰트 다운로드만 네트워크를 사용합니다.
사용 환경
Chrome Web Store에서 설치 가능한 Chrome 및 기타 Chromium 기반 브라우저에서 작동합니다. Firefox와 Safari에서는 작동하지 않습니다.
제한 사항
웹페이지의 실제 텍스트 CSS를 읽습니다. 이미지, 캔버스, PDF의 텍스트나 Chrome 자체 페이지는 읽지 않습니다.
버전
2.2.0, 업데이트 2026년 10월 23일

두 번 클릭해 폰트 찾기

  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 등급을 확인하고 디자인을 공개하기 전에 더 어두운 글자나 밝은 배경을 시험해 보세요.

주요 기능

  • 가이드가 있는 견본

    폰트 스택의 첫 번째 글꼴을 표시합니다. 실제 폰트에서 측정한 대문자 높이, x 높이, 기준선 가이드를 함께 볼 수 있습니다.

  • 코드 형식

    CSS, SCSS, SASS, Tailwind를 지원합니다. 전체 코드나 한 줄만 복사할 수 있고 마지막으로 사용한 형식을 기억합니다.

  • 원하는 단위

    입력란과 코드에서 px, rem, pt, em으로 크기를 확인하세요. rem은 페이지의 루트 크기를 기준으로 합니다.

  • 폰트 출처

    Google Fonts, Adobe Fonts, 자체 호스팅 또는 컴퓨터에 설치된 시스템 폰트인지 표시합니다.

  • 명암비 검사

    일반 텍스트와 큰 텍스트의 명암비를 AA, AAA 등급과 함께 보여 줍니다. 색상을 바꾸면 값도 업데이트됩니다.

  • 폰트 다운로드

    @font-face 출처에서 파일을 가져와 글꼴 이름으로 저장합니다. 서버가 차단하면 출처를 새 탭에서 엽니다.

DevTools에서 폰트 찾기는 왜 오래 걸릴까요?

페이지는 폰트 목록을 선언하고 브라우저는 사용할 수 있는 첫 번째 폰트를 선택합니다. 어떤 폰트인지 알아보려면 DevTools를 열고 요소를 찾은 뒤 Computed 패널을 확인하고, Network 패널에서 폰트 파일을 찾아야 합니다. 크기, 굵기, 줄 높이와 색상도 각각 다른 곳에 있습니다.

폰트렌즈는 선택한 텍스트의 계산된 스타일을 읽어 글꼴 목록, 첫 번째 글꼴 견본, 수치, 폰트 출처와 CSS를 한 패널에 모읍니다. 페이지 CSS를 읽기 때문에 이미지 속 폰트는 찾을 수 없습니다.

브라우저 밖으로 데이터가 나가지 않습니다

  • 계정과 서버가 필요 없음

    폰트렌즈는 브라우저에서 실행됩니다. 분석과 추적이 없습니다.

  • 선택한 텍스트만 읽기

    검사기는 우클릭한 텍스트의 스타일을 읽습니다. 페이지 정보는 어디에도 전송되지 않습니다.

  • 권한 네 가지

    우클릭 메뉴 항목을 위한 컨텍스트 메뉴, 검사기를 열기 위한 활성 탭과 페이지 접근, 샘플 텍스트·단위·코드 형식 저장을 위한 스토리지를 사용합니다.

Chrome DevTools와 폰트렌즈 비교

Chrome DevTools와 폰트렌즈 비교Chrome DevTools폰트렌즈
텍스트의 폰트 확인요소를 찾아 검사하고 Computed 패널 열기텍스트 선택, 우클릭, 메뉴에서 한 번 선택
Tailwind 또는 SCSS로 복사값을 하나씩 복사해야 합니다CSS, SCSS, SASS 또는 Tailwind 탭
폰트 출처 확인Network 패널에서 폰트 파일 찾기Google Fonts, Adobe Fonts, 자체 호스팅 또는 시스템을 배지로 표시
폰트 파일 다운로드Network나 Sources에서 찾아 저장버튼 한 번
명암비 검사Styles 패널의 색상 선택기실시간 미리보기 옆에 AA, AAA 등급 표시
가격기본 제공무료

자주 묻는 질문

웹사이트에서 사용하는 폰트를 어떻게 찾나요?

폰트렌즈를 Chrome에 추가하고 사이트의 텍스트를 선택한 다음 우클릭해 ‘Inspect font with FontLens’를 선택하세요. 글꼴, 크기, 굵기, 줄 높이, 색상과 출처가 표시됩니다.

웹사이트 폰트의 CSS를 어떻게 복사하나요?

검사기에서 CSS, SCSS, SASS 또는 Tailwind 탭을 선택하고 ‘Copy all’을 누르세요. 한 줄만 복사할 수도 있습니다. 필요하면 먼저 단위를 px, rem, pt, em으로 바꾸세요.

웹사이트에서 폰트를 다운로드할 수 있나요?

텍스트가 웹 폰트를 사용하면 ‘Download font’로 @font-face 출처에서 파일을 가져올 수 있습니다. 시스템 폰트는 다운로드할 파일이 없습니다. 프로젝트에서 사용하기 전에 라이선스를 확인하세요.

이미지나 PDF의 폰트도 찾을 수 있나요?

아니요. 웹페이지의 실제 텍스트 CSS를 읽기 때문에 이미지, 캔버스, PDF의 폰트는 찾을 수 없습니다.

WCAG 기준에 맞게 텍스트 명암비를 확인하려면?

미리보기에서 텍스트와 배경의 명암비, 일반 및 큰 텍스트의 AA와 AAA 등급을 확인할 수 있습니다. 색상을 바꾸면 등급도 업데이트됩니다.

px 대신 rem으로 크기를 표시할 수 있나요?

네. px, rem, pt, em 중에서 단위를 선택하면 입력란과 코드에 적용됩니다. rem은 페이지의 루트 글꼴 크기를 기준으로 계산되며 선택한 단위는 저장됩니다.

무료인가요? 데이터를 수집하나요?

무료이며 계정이 필요 없습니다. 서버나 분석 기능이 없고, 직접 시작한 폰트 다운로드만 네트워크를 사용합니다.

Edge, Brave, Opera에서도 작동하나요?

대부분의 Chromium 브라우저에서 Chrome Web Store 확장 프로그램을 설치할 수 있습니다. Edge, Brave, Opera, Vivaldi도 포함됩니다. Firefox와 Safari는 지원하지 않습니다.

PYROCTAL의 다른 무료 확장 프로그램

이 폰트 뭐지? 두 번 클릭이면 충분해요.

Chrome에 추가 — 무료