폰트 찾기 확장 프로그램이 적합한 경우
원본 웹페이지를 열 수 있고 실제 HTML 텍스트에 마우스를 올리거나 클릭할 수 있다면 확장 프로그램이 가장 빠릅니다. 브라우저는 이미 폰트 스택, 계산된 크기, 굵기, 줄 높이, 색상을 알고 있습니다.
정적인 이미지에서 폰트를 찾는 것과는 다릅니다. 로고, 포스터, 스크린샷, 광고, Canva 내보내기, 납작한 PDF 안의 텍스트에는 읽을 CSS가 없습니다. 이때는 시각적 매칭이 필요합니다.
간단한 기준
텍스트를 선택할 수 있으면 확장 프로그램부터 쓰고, 픽셀로만 보이면 이미지를 Font Detector에 업로드하세요.
주요 폰트 찾기 확장 프로그램 비교
대부분 기본 기능은 비슷하지만 속도, 세부 정보, 작업 흐름이 다릅니다. 이름만 필요하면 가벼운 도구를, 자주 비교한다면 더 자세한 도구를 선택하세요.
| 확장 프로그램 | 적합한 용도 | 표시 정보 | 한계 |
|---|---|---|---|
| WhatFont | 웹페이지 빠른 확인 | 패밀리, 크기, 굵기, 색상, 기본 정보 | 이미지 속 텍스트에는 부적합 |
| Fonts Ninja | 여러 폰트를 비교하는 디자이너 | 세부 정보, 미리보기, 감지된 페이지 폰트 | 간단한 용도에는 인터페이스가 많음 |
| Fontanello | CSS 정보를 원하는 개발자 | 패밀리, 굵기, 크기, 색상, CSS 속성 | 선택 가능한 텍스트 필요 |
| DevTools | 최종 확인 | 계산된 CSS와 렌더링 폰트 | 원클릭 확장보다 느림 |
폰트 찾기 확장 프로그램 사용 방법
인터페이스는 달라도 흐름은 거의 같습니다.
- 브라우저 공식 확장 스토어에서 신뢰할 수 있는 확장을 설치합니다.
- 확인하려는 폰트가 있는 웹페이지를 엽니다.
- 확장 아이콘을 클릭하고 대상 텍스트에 마우스를 올리거나 클릭합니다.
- 폰트 패밀리, 굵기, 크기, 줄 높이, 색상, fallback을 기록합니다.
- 결과가 일반 fallback처럼 보이면 DevTools에서 확인합니다.
첫 번째 이름만 보고 끝내지 마세요
CSS에는 Inter, Arial, sans-serif처럼 여러 폰트가 나열될 수 있습니다. 첫 번째가 의도한 폰트지만, 웹폰트 로딩 실패 시 fallback이 렌더링될 수 있습니다.
DevTools로 웹 폰트 확인하기
정확한 서체가 중요한 경우 확장 프로그램은 빠른 확인용으로, DevTools는 최종 검증용으로 사용하세요.
- 대상 텍스트를 오른쪽 클릭하고 Inspect를 선택합니다.
- 보이는 텍스트가 포함된 요소를 선택합니다.
- Computed 패널에서 font-family를 검색합니다.
- font-size, font-weight, line-height, letter-spacing도 확인합니다.
- Chrome 또는 Edge에서는 가능하면 실제 렌더링된 폰트 영역도 확인합니다.
사이트는 가변 폰트, 긴 fallback 스택, 반응형 타이포그래피를 사용하므로 기기, 화면 폭, 언어, 로딩 상태에 따라 보이는 폰트가 달라질 수 있습니다.
폰트 확장 프로그램이 작동하지 않는 경우
확장 프로그램은 DOM의 실제 텍스트에 의존합니다. 소스 형식으로 판단하세요.
| 소스 | 사용할 도구 | 이유 |
|---|---|---|
| 로고 또는 이미지 | Font Detector | 텍스트가 픽셀이므로 시각적 매칭이 필요합니다. |
| 스크린샷 | Font Detector 또는 원본 페이지 | 확장 프로그램은 실제 페이지에서만 작동합니다. |
| 납작한 PDF | 스크린샷과 AI 감지 | 폰트 메타데이터가 없을 수 있습니다. |
| 선택 가능한 PDF | PDF 속성 먼저 확인 | 내장 폰트 목록에서 정확한 이름을 알 수 있습니다. |
신뢰할 수 있는 폰트 식별 흐름
실제 프로젝트에서는 하나의 신호만 보지 말고 소스에 맞게 확인하세요.
- 실제 웹사이트: 확장 프로그램을 사용한 뒤 DevTools에서 계산된 폰트와 렌더링된 폰트를 확인합니다.
- 스크린샷 또는 로고: 정확한 단어만 자른 뒤 Font Detector에 업로드합니다.
- PDF: 내장 폰트를 먼저 확인하고, 납작한 PDF라면 깨끗한 스크린샷과 AI 감지를 사용합니다.
- 불확실한 결과: a, g, R, S, 숫자, 획 대비, 자간 같은 특징을 비교합니다.
자주 묻는 질문
대부분에게는 WhatFont가 가장 빠릅니다. 미리보기와 비교가 필요하면 Fonts Ninja가 좋고, 기술적 확인에는 Fontanello나 DevTools가 적합합니다.
아니요. 확장 프로그램은 웹 텍스트와 CSS를 읽습니다. 이미지, 로고, 납작한 PDF에는 Font Detector를 사용하세요.
CSS는 fallback을 포함한 폰트 스택을 자주 사용합니다. 정확성이 필요하면 렌더링된 폰트를 확인하세요.
최종 확인에는 그렇습니다. DevTools는 계산된 스타일과 실제 렌더링 폰트를 보여줄 수 있습니다.
식별은 라이선스가 아닙니다. 상업적 사용 전에는 반드시 공식 라이선스를 확인하세요.
참고 자료
- CSS 검사를 위한 Google Chrome DevTools 문서 — https://developer.chrome.com/docs/devtools/css
- WhatFont Chrome Web Store 등록 페이지 — https://chromewebstore.google.com/
- Fonts Ninja 공식 웹사이트 — https://www.fonts.ninja/
마지막 업데이트: 2026년 5월 22일
Font Detector로 돌아가기