웹사이트 폰트 추출기.

폰트 추출기란?

폰트 추출기는 웹 페이지에서 사용하는 서체를 찾아내고, 그 뒤에 있는 폰트 파일에 바로 접근할 수 있게 해 주는 온라인 도구입니다. 눈대중으로 폰트를 추측하는 대신 링크를 붙여 넣기만 하면, 사이트가 불러오는 폰트 패밀리, 굵기, 스타일, 파일 형식의 정확한 목록을 얻을 수 있습니다. FontExtractor는 이 작업을 몇 초 만에 처리하는 무료 웹사이트 폰트 추출기로, 실시간 미리보기와 원클릭 다운로드를 제공합니다.

요즘 웹사이트는 모든 컴퓨터에 설치된 몇 가지 기본 폰트에만 의존하지 않습니다. Google Fonts, Adobe Fonts, CDN 또는 자체 서버에서 CSS @font-face 규칙으로 사용자 지정 웹 폰트를 불러옵니다. 이 규칙들은 여러 스타일시트, 중첩된 @import 문, 인라인 <style> 태그에 흩어져 있어 직접 찾기가 무척 번거롭습니다. 폰트 추출기는 이 모든 것을 대신 읽어 줍니다.

FontExtractor 핵심 정보

URL로 폰트를 추출하는 방법

URL 폰트 추출기 사용은 1분도 걸리지 않습니다.

1. 타이포그래피를 확인하고 싶은 페이지의 주소를 복사하세요. 홈페이지뿐 아니라 공개된 페이지라면 어디든 가능합니다.
2. 이 페이지 상단 입력란에 붙여 넣고 폰트 추출을 누르세요. https://는 생략해도 자동으로 붙여 드립니다.
3. 결과를 확인하세요. 각 폰트 패밀리가 해당 폰트로 표시된 카드로 나타나고, 아래에 모든 굵기와 스타일이 정리됩니다.
4. 미리보기 입력란에 원하는 문구를 입력하고 크기를 조절해 제목과 본문에서 폰트가 어떻게 보이는지 확인하세요.
5. 다운로드 또는 복사. 파일을 하나씩 저장하거나, fonts.css가 포함된 ZIP으로 한 번에 받거나, 패밀리의 @font-face CSS를 복사할 수 있습니다.

웹사이트 폰트 추출기는 어떤 폰트를 찾아낼 수 있나요?

FontExtractor는 페이지가 HTML과 CSS에 선언한 폰트를 찾아냅니다. 자체 호스팅 파일, Google Fonts, Adobe Fonts, 가변 폰트, base64로 포함된 폰트를 WOFF2, WOFF, TTF, OTF, EOT, SVG 형식으로 확인할 수 있습니다.

FontExtractor는 브라우저가 페이지를 렌더링할 때와 같은 경로를 따라갑니다. HTML을 내려받고, 연결된 모든 스타일시트(성능을 중시하는 사이트가 쓰는 preload, print-then-all 로딩 기법 포함)를 찾고, @import 체인을 여러 단계까지 따라가며, 발견한 모든 @font-face 블록을 분석합니다. 결과에는 다음이 포함됩니다.

• 사이트 자체 도메인이나 CDN에서 제공하는 셀프 호스팅 폰트
• latin, latin-ext, cyrillic 등 모든 유니코드 서브셋을 포함한 Google Fonts
• CSS로 제공되는 Adobe Fonts(Typekit) 및 기타 폰트 서비스
• 100–900처럼 전체 굵기 범위를 보여 주는 가변 폰트
• 스타일시트 안에 data: URI로 직접 들어 있는 base64 내장 폰트
• <link rel="preload" as="font">로 선언된 프리로드 폰트
• WOFF2, WOFF, TTF, OTF, EOT, SVG 등 모든 주요 형식. 여러 형식이 지정된 경우 가장 효율적인 형식을 자동으로 선택합니다.

다운로드 가능한 파일 외에도, CSS가 요청하는 폰트 스택을 함께 보여 줍니다. 이를 통해 사이트가 -apple-system, Segoe UI, Apple SD Gothic Neo, 맑은 고딕 같은 시스템 폰트에 의존하는지 알 수 있습니다. 시스템 폰트는 방문자의 기기에 설치되어 있으므로 어떤 폰트 추출기로도 다운로드할 수 없습니다.

디자이너와 개발자가 폰트를 추출하는 이유

타이포그래피는 브랜드 개성의 큰 부분을 차지하기 때문에, "이 폰트 뭐지?"는 디자인에서 가장 흔한 질문 중 하나입니다. 폰트 추출기가 특히 시간을 아껴 주는 상황은 다음과 같습니다.

• 디자인 영감과 리서치. 무드보드를 만들고, 잘 만든 제품들이 제목용과 본문용 서체를 어떻게 조합하는지 비교해 보세요.
• 프런트엔드 개발. 레이아웃을 정확히 재현하거나, 로드되지 않는 폰트를 디버깅하거나, 사이트가 제공하는 형식을 확인할 수 있습니다.
• 브랜드 점검. 자사 사이트의 모든 페이지가 승인된 서체를 불러오고, 잊힌 예전 파일이 남아 있지 않은지 확인하세요.
• 성능 점검. 너무 많은 굵기를 불러오거나, WOFF2 대신 무거운 TTF를 제공하는 사이트를 찾아낼 수 있습니다.
• 클라이언트 작업. 클라이언트가 예전 사이트의 폰트를 모를 때도 몇 초 만에 찾아낼 수 있습니다.

웹사이트에서 추출한 폰트를 사용해도 되나요?

폰트 파일을 다운로드할 수 있다고 해서 사용해도 된다는 뜻은 아닙니다. 폰트는 소프트웨어이며, 대부분의 상업용 서체는 웹사이트, 앱, 페이지뷰 수 단위로 라이선스가 부여됩니다. 웹의 많은 폰트가 오픈 소스이고(예를 들어 Google Fonts의 거의 모든 폰트는 SIL Open Font License를 따릅니다), 폰트 회사나 Adobe Fonts의 유료 패밀리는 이를 구매한 사이트에만 사용이 허락됩니다.

FontExtractor는 폰트를 식별하고 평가하며 로컬에서 테스트하는 용도로 사용하세요. 내 프로젝트에 폰트를 게시하기 전에는 라이선스를 확인하고, 필요하다면 폰트 회사에서 구매하세요. 서체 디자이너를 응원하는 것이 멋진 새 서체가 계속 탄생하는 원동력입니다.

폰트 추출기 vs 개발자 도구와 확장 프로그램

페이지의 모든 폰트를 한 번에 확인하려면 온라인 폰트 추출기를 사용하세요. 로그인이 필요한 페이지나 JavaScript로 추가되는 폰트는 브라우저 개발자 도구나 확장 프로그램을 사용하세요.

브라우저 개발자 도구로도 폰트를 직접 찾을 수 있습니다. 요소를 검사하고 Computed 패널을 연 뒤, Network 탭에서 폰트 요청을 찾는 방식입니다. 요소 하나라면 괜찮지만, 여러 패밀리와 유니코드 서브셋, 가변 폰트를 쓰는 사이트에서는 금세 번거로워집니다. 브라우저 확장 프로그램도 도움이 되지만 설치와 모든 사이트에 대한 권한이 필요하고, 대개 마우스를 올린 요소의 폰트만 보여 줍니다.

온라인 웹사이트 폰트 추출기는 설치가 필요 없고, 스마트폰과 태블릿을 포함한 모든 기기에서 작동하며, 페이지 전체의 폰트 목록을 미리보기, 정리된 파일 이름, 다운로드 가능한 CSS와 함께 한 번에 보여 줍니다.

더 좋은 결과를 위한 팁

더 좋은 결과를 얻으려면 확인하려는 페이지를 정확히 분석하고, 폰트가 나타나지 않으면 해당 페이지의 스타일시트 URL을 직접 시도해 보세요.

• 관심 있는 바로 그 페이지를 분석하세요. 랜딩 페이지, 블로그, 문서 페이지는 서로 다른 폰트를 불러오는 경우가 많습니다.
• 폰트가 나오지 않는다면 사이트가 로드 후 JavaScript로 스타일을 생성하는 것일 수 있습니다. 스타일시트 URL을 직접 분석해 보세요.
• 일부 사이트는 봇 차단 기능으로 자동화된 요청을 막습니다. 분석에 실패하면 잠시 후 다시 시도하거나 같은 도메인의 다른 페이지를 이용하세요.
• 웹에서는 WOFF2 파일을 권장합니다. 용량이 가장 작고 모든 최신 브라우저에서 지원됩니다.
• 복사한 CSS의 unicode-range 규칙을 그대로 두면 브라우저가 필요한 서브셋만 내려받습니다.

좋아하는 웹사이트가 어떤 폰트를 쓰는지 궁금하신가요? 페이지 맨 위로 돌아가 링크를 붙여 넣고, 나머지는 폰트 추출기에 맡기세요.