웹사이트에 사용된 폰트 찾는 방법: 실용적인 4가지 방법

웹사이트 폰트를 찾는 방법 선택하기

웹사이트에 사용된 폰트를 찾는 상황은 크게 두 가지입니다. 실제 페이지에서 선택할 수 있는 글자를 보는 경우와, 글자가 이미 이미지가 된 스크린샷을 보는 경우입니다. 먼저 아래 기준으로 구분해 보세요.

먼저 글자가 라이브 HTML인지 확인하세요

마우스나 키보드로 단어를 선택해 보세요. 강조 표시, 복사, 검색이 가능하다면 대개 라이브 HTML 텍스트입니다. 이 경우 브라우저가 요소, 계산된 스타일, 페이지가 선택한 폰트 목록을 확인할 수 있습니다.

글자가 히어로 이미지, 로고, canvas, 광고 이미지 안에 있어 선택할 수 없다면 이미지로 취급해야 합니다. 라이브 텍스트용 방법은 주변 요소의 폰트만 보여 주고 이미지 안의 글꼴은 놓칠 수 있습니다.

반응형 변경도 확인하세요. 데스크톱 제목과 모바일 제목이 다른 폰트 패밀리나 굵기를 사용할 수 있습니다. 재현하려는 화면 크기에서 정확한 요소를 검사해야 합니다.

라이브 페이지의 글자는 브라우저 확장으로 찾기

전체 CSS 감사를 할 필요 없이 실제 웹사이트의 글자만 조사한다면 폰트 확인용 브라우저 확장이 가장 빠를 수 있습니다. 커서가 가리키는 요소의 패밀리, 크기, 굵기, 색상을 확인할 수 있습니다.

1. 확인할 글자가 있는 페이지를 열고 콘텐츠 로딩이 끝날 때까지 기다립니다.
2. 신뢰할 수 있는 폰트 검사 확장을 켜고 제목, 메뉴, 버튼, 본문 등 정확한 글자 위에 커서를 올립니다.
3. serif나 sans-serif 같은 분류뿐 아니라 패밀리 이름과 굵기를 기록합니다.
4. 다른 요소에서도 반복 확인합니다. 서로 다른 폰트가 나오면 제목과 본문을 의도적으로 조합했을 수 있습니다.

브라우저 확장의 차이와 한계를 비교하려면 폰트 찾기 브라우저 확장 가이드도 읽어 보세요. 스크린샷을 사용해야 하는 경우도 설명합니다.

DevTools로 웹사이트 폰트 검증하기

리디자인, CSS 감사, 접근성 점검, 구현 작업을 위해 근거가 필요하다면 DevTools가 적합합니다. 확장이 보여 주는 이름만 믿지 않고 선택한 요소의 스타일을 직접 확인할 수 있습니다.

1. 글자 위에서 마우스 오른쪽 버튼을 누르고 검사를 선택하거나 DevTools의 요소 선택 도구를 사용합니다.
2. Styles 또는 Computed 패널에서 font-family를 찾고 대체 폰트의 순서를 기록합니다.
3. font-size, font-weight, line-height, letter-spacing, text-transform도 확인합니다. 이 값들이 글자의 인상을 바꿉니다.
4. 브라우저에서 렌더링된 폰트 정보를 보여 준다면 CSS 선언과 비교하고 대체 폰트가 사용됐는지 기록합니다.

브라우저의 기술적인 검사 흐름은 공식 Chrome DevTools CSS 검사 문서.

웹사이트 스크린샷에서 폰트 찾기

원본 페이지를 검사할 수 없거나, 글자가 그래픽 안에 있거나, 디자인이 평면 이미지로 공유된 경우에는 스크린샷 기반 폰트 찾기가 적합합니다. 페이지가 변경된 뒤에도 저장한 이미지로 조사할 수 있습니다.

한 가지 글꼴만 들어가도록 샘플을 글자 주변에서 작게 자르세요. 여러 패밀리, 아이콘, 사진, 작은 라벨이 섞인 전체 페이지보다 선명한 제목이나 버튼 한 줄이 비교에 더 유리합니다.

• 선명한 글자 사용: a, e, g, R, t처럼 반복되는 글자 모양을 비교할 수 있을 만큼 크게 자릅니다.
• 한 스타일로 유지: 하나의 패밀리를 찾을 때 굵은 제목과 얇은 본문을 함께 넣지 않습니다.
• 유력한 후보로 이해: 커스텀 또는 변형된 폰트는 정확한 원본 대신 가까운 대체 폰트를 반환할 수 있습니다.

스크린샷이 있다면 Website Font Detector 열기에서 글자 모양을 비교하고 비슷한 폰트 후보를 확인해 보세요.

웹사이트 폰트를 찾을 때 자주 하는 실수

폰트 이름만으로는 디자인을 정확하게 재현할 수 없습니다. 도구마다 결과가 다른 이유는 다음과 같습니다.

• 대체 폰트: CSS의 첫 번째 후보가 브라우저에서 실제로 렌더링된 폰트가 아닐 수 있습니다.
• 가변 폰트: 같은 패밀리도 굵기나 광학 크기 설정에 따라 다르게 보일 수 있습니다.
• 이미지 속 글자: 배너, 로고, canvas에 래스터화된 글자는 DevTools로 검사할 수 없습니다.
• 혼합된 구성 요소: 제목, UI, 마케팅 그래픽에 서로 다른 폰트를 사용하는 디자인 시스템도 있습니다.
• 라이선스: 폰트를 찾았다고 해서 다운로드나 상업적 사용 권리가 생기는 것은 아닙니다. 사용 조건을 확인하세요.

정확성이 중요하다면 URL 또는 캡처, 검사한 요소, CSS 패밀리, 실제 렌더링 폰트, 가장 가까운 시각적 후보를 간단히 기록해 두세요.

결과를 실제 폰트 결정으로 연결하기

라이브 HTML에서 기술적인 폰트 목록이 필요하면 DevTools나 브라우저 확장을 사용하세요. 배너, 로고, 모바일 캡처, 저장한 디자인을 조사한다면 스크린샷을 사용하세요. 가지고 있는 자료에 맞는 방법을 고르는 것이 가장 정확합니다.

유력한 패밀리를 찾은 뒤에는 같은 글자를 같은 굵기와 크기로 비교하고, 고객 프로젝트나 제품, 공개 웹사이트에 사용하기 전에 라이선스를 확인하세요.