List All Fonts는 웹 페이지를 스캔하여 사용 중인 모든 폰트 패밀리를 완전하게 인벤토리 형태로 보여줍니다. CDN에서 로드된 웹 폰트, 자체 호스팅 폰트, 시스템 폰트 폴백까지 모두 포함됩니다. 각 폰트에 라이브 텍스트 미리보기, 로드된 굵기와 스타일, 해당 폰트를 사용하는 요소 수, CSS font-family 선언을 원클릭으로 복사할 수 있는 기능이 제공됩니다.
존경하는 웹사이트의 폰트를 확인하려면 예전에는 DevTools에서 요소를 하나씩 검사하고 computed font-family 속성을 확인하거나, 한 번에 하나의 폰트만 감지하는 확장 프로그램을 사용해야 했습니다. List All Fonts는 한 화면에서 완전한 그림을 제공합니다. 페이지에서 로드되고 실제로 사용 중인 모든 폰트와, 각 폰트가 어떻게 렌더링되는지 보여주는 라이브 텍스트 샘플이 포함됩니다. 도구는 웹 폰트(@font-face 또는 Google Fonts로 로드된 것)와 시스템 폰트(Arial, Helvetica, Georgia 등)를 구분하여 완전한 font-family 스택을 보여줍니다. 각 폰트에 대해 어떤 굵기가 로드되었는지(400, 600, 700), 어떤 요소가 그것을 사용하는지, 어떤 폰트 크기가 적용되었는지 표시됩니다. 폰트 항목을 클릭하면 CSS 선언을 복사할 수 있어 바로 자신의 프로젝트에 붙여넣을 수 있습니다. 라이브 미리보기는 Google Fonts의 일반 미리보기가 아닌 페이지에서 실제로 로드된 폰트 렌더링을 사용하므로 해당 사이트에서 사용되는 크기와 굵기에서 정확히 어떻게 보이는지 확인할 수 있습니다.
페이지에서 실제로 렌더링되는 모든 font-family를 나열합니다. Google Fonts, Adobe Fonts, 또는 커스텀 @font-face 선언으로 로드된 웹 폰트와 시스템 폰트 폴백을 모두 포함합니다. 발견된 고유 폰트 패밀리 총 개수를 보여줍니다.
각 폰트에 "The quick brown fox jumps over the lazy dog" 같은 라이브 텍스트 샘플이 페이지에서 실제로 로드된 폰트 파일로 렌더링되어 표시됩니다. 일반적인 미리보기가 아닌 실제 렌더링 결과를 볼 수 있습니다.
각 폰트에 로드된 굵기(Regular 400, Medium 500, SemiBold 600, Bold 700)와 이탤릭 변형이 사용 가능한지 표시됩니다. 폰트의 로드된 서브셋을 이해하는 데 도움이 됩니다.
페이지에서 각 폰트를 사용하는 요소의 개수를 보여줍니다. 가장 많이 사용된 폰트가 먼저 표시됩니다. 본문에 사용되는 주요 폰트와 몇몇 요소에만 사용되는 보조 폰트를 구분할 수 있습니다.
폰트 항목을 클릭하면 완전한 CSS font-family 선언(예: font-family: 'Inter', sans-serif)을 클립보드에 복사할 수 있습니다. 스타일시트에 바로 붙여넣을 수 있습니다.
각 폰트에 소스 정보가 표시됩니다: Google Fonts(구체적인 URL 포함), Adobe Fonts, 자체 호스팅(@font-face URL 포함), 또는 시스템 폰트. 각 폰트가 어디에서 왔는지 정확히 알 수 있습니다.
타이포그래피가 아름다운 웹사이트를 방문하여 사용 중인 모든 폰트의 이름, 굵기, 출처를 즉시 확인하세요. "저 폰트가 뭐지?" 하는 추측이나 신뢰할 수 없는 폰트 식별 도구를 사용할 필요가 없습니다.
페이지가 몇 개의 폰트를 로드하나요? 다운로드는 되었지만 실제로 사용되지 않는 폰트가 있나요? List All Fonts는 실제 사용량을 보여줍니다. 사용 요소가 0개인 폰트가 있다면 불필요한 대역폭 낭비입니다.
각 페이지에서 List All Fonts를 실행하여 프로젝트의 타이포그래피를 문서화하세요. 사이트 전체에서 올바른 폰트와 굵기가 일관되게 사용되고 있는지 확인하고, 잘못된 font-family 선언을 발견할 수 있습니다.
마음에 드는 폰트를 발견했지만 유료 폰트인가요? 폰트 이름을 복사하여 비슷한 특징을 가진 무료 대안을 검색하세요. 라이브 미리보기로 정확히 어떻게 보였는지 기억하기 쉽습니다.
같은 페이지를 다른 브라우저에서 실행하여 동일한 폰트가 렌더링되는지 확인하세요. 시스템 폰트 스택은 운영 체제마다 다르게 해석됩니다. 불일치를 조기에 발견할 수 있습니다.
DevSuite Pro 플로팅 독을 열고 List All Fonts 아이콘을 클릭하세요. 도구가 페이지의 계산된 스타일과 @font-face 규칙을 스캔합니다.
사용 빈도순으로 정렬된 모든 폰트가 패널에 표시됩니다. 각 항목에는 폰트 이름, 미리보기 텍스트, 굵기, 요소 사용 개수가 표시됩니다.
라이브 미리보기를 스크롤하며 각 폰트가 어떻게 렌더링되는지 확인하세요. 페이지의 제목 폰트와 본문 폰트, 강조 폰트를 비교할 수 있습니다.
폰트 항목을 클릭하면 font-family CSS 선언을 복사합니다. 소스 링크를 클릭하면 폰트의 원본 페이지(Google Fonts 페이지, CDN URL 등)로 이동할 수 있습니다.
font-family 선언을 자신의 CSS에 붙여넣고 동일한 소스에서 폰트를 로드하여 프로젝트에서 사용하세요.
DevSuite Pro를 무료로 설치하고 브라우저용 39개 이상의 개발자 도구를 사용해보세요.
