Chrome & Firefox DevTools로 폰트 찾는 방법

브라우저 DevTools를 사용하면 모든 요소에 렌더링된 정확한 폰트를 검사할 수 있습니다. 사용 방법과 URL 스캐너가 더 빠른 선택인 경우를 알아봅니다.

Chrome DevTools - 렌더링된 폰트

1임의의 텍스트를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다(또는 Ctrl+Shift+I / Cmd+Option+I 누르기).
전체 스크린샷 보기
임의의 텍스트를 마우스 오른쪽 버튼으로 클릭하고 검사 클릭
2Chrome이 클릭한 요소가 DOM 트리에서 강조 표시된 상태로 요소 패널을 엽니다.
3오른쪽 패널에서 계산됨 탭을 클릭합니다(스타일 옆의 두 번째 탭).
4CSS 속성 아래로 스크롤하여 렌더링된 폰트 섹션을 찾습니다.
전체 스크린샷 보기
계산됨 탭 - "렌더링된 폰트"까지 스크롤하여 활성 서체 확인
5브라우저가 사용한 정확한 서체, 로드된 소스 파일, 그리고 그려진 글리프 수를 확인할 수 있습니다.

1임의의 텍스트를 마우스 오른쪽 버튼으로 클릭하고 검사를 선택합니다(또는 F12 누르기). 인스펙터 패널이 열립니다.
2인스펙터의 오른쪽 패널(보통 규칙과 계산됨이 표시되는 곳)에서 폰트 탭을 클릭합니다.
3왼쪽 열에 페이지에서 로드된 모든 폰트가 나열됩니다. 폰트 이름을 클릭하면 견본, 굵기 범위, 형식, 소스 URL을 확인할 수 있습니다.
전체 스크린샷 보기
Firefox 폰트 탭 - 모든 페이지 폰트가 왼쪽에 나열, 세부 정보는 오른쪽에

DevTools는 개별 요소를 검사하는 데 뛰어나지만 페이지에서 로드된 모든 폰트의 완전한 목록을 제공하지는 않습니다. 완전한 감사를 위해서는 아래에 URL을 붙여넣으세요.

임의의 URL을 붙여넣으면 모든 @font-face 규칙, Google Fonts 가져오기, CDN 링크를 포함한 사용된 모든 웹 폰트의 전체 목록을 한 번의 스캔으로 확인할 수 있습니다.

Chrome의 "렌더링된 폰트"란 무엇인가요?

"렌더링된 폰트"는 font-family 대체를 적용한 후 브라우저가 선택한 텍스트를 그리는 데 실제로 사용한 서체를 보여줍니다. CSS font-family 선언과 다를 수 있습니다.

렌더링된 폰트가 CSS font-family와 다른 이유는 무엇인가요?

font-family는 우선순위가 있는 대체 목록입니다. 첫 번째 폰트가 로드에 실패하면(누락된 파일, CORS 오류) 브라우저는 다음 후보로 이동합니다. 렌더링된 폰트는 실제로 사용된 것을 보여줍니다.

DevTools로 페이지의 모든 폰트를 찾을 수 있나요?

Firefox의 폰트 탭은 페이지에서 로드된 모든 폰트를 보여줍니다. Chrome은 요소를 하나씩 검사해야 합니다. 완전한 자동화된 목록을 위해서는 위의 URL 스캐너를 사용하세요.

URL 스캐너가 Google Fonts도 감지하나요?

예 - 모든 폰트 소스가 감지됩니다: Google Fonts, Bunny Fonts, Fontshare, 자체 호스팅된 @font-face 폰트.