무료 도구, 회원가입 불필요
이 웹사이트는 어떤 폰트를 쓸까요?
URL을 붙여 넣으면 웹사이트가 쓰는 폰트를 굵기, 크기, 사용 위치와 함께 보여 드려요. 무료이고 회원가입도 필요 없어요. Anthropic의 폰트, Airbnb의 폰트 같은 예시를 보거나, DESIGN.md가 무엇을 더해 주는지 알아보세요.
내 코드에서 이 폰트 사용하기
폰트 찾기는 패밀리 이름, 굵기, 각 폰트가 쓰이는 위치를 알려 줘요. 재사용하려면 패밀리마다 한 번씩 불러오고, 역할마다 CSS 변수를 지정하고, 폰트를 내려받는 동안이나 불러오기에 실패해도 텍스트가 표시되도록 스택 끝에는 항상 대체 폰트를 두세요.
1. 폰트 불러오기. Google Fonts 패밀리라면 <link> 태그를 추가하거나 next/font/google을 쓰고, 폰트 찾기가 보여 준 굵기만 요청하세요. 상용 폰트라면 폰트 제작사에서 웹 라이선스를 구매하고 @font-face로 파일을 제공하세요.
2. 역할에 이름 붙이기. 용도마다 변수 하나: 제목용 display, 본문용 body, 코드용 mono. 패밀리 이름은 찾은 폰트로 바꾸세요.
:root {
--font-display: "Inter Display", "Inter", system-ui, sans-serif;
--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; }
body { font-family: var(--font-body); font-weight: 400; }
code, pre { font-family: var(--font-mono); }3. Tailwind에서 사용하기. 같은 스택이 font-display, font-sans, font-mono 유틸리티가 돼요.
/* app.css, Tailwind CSS v4 */
@theme {
--font-display: "Inter Display", "Inter", system-ui, sans-serif;
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, monospace;
}패밀리는 타입 시스템의 절반이에요. 단계별 크기, 줄 높이, 자간은 DESIGN.md의 타이포그래피 섹션에 담기고, 코딩 에이전트가 모든 화면에 적용할 수 있어요.
FAQ
폰트 찾기 FAQ
무료 웹사이트 폰트 찾기에 대한 짧은 답변이에요.
실제 브라우저에서 페이지를 열고, 보이는 모든 텍스트의 계산된 폰트를 읽어요. 브라우저가 실제로 렌더링한 패밀리와 그 굵기, 크기를 읽은 뒤, 패밀리별로 묶어 텍스트를 얼마나 많이 표시하는지에 따라 순위를 매겨요.
아니요. 폰트는 라이선스가 있는 소프트웨어이고, 사이트의 라이선스는 보통 그 사이트에만 적용돼요. Google Fonts에 있는 패밀리라면 거기서 무료로 받을 수 있고, 그렇지 않다면 제작사를 찾아 직접 사용할 라이선스를 구매하세요.
입력한 페이지 하나만 읽고 패밀리를 최대 8개까지 보여 줘요. 처음 방문한 사람에게 그 페이지가 보여 주는 텍스트만 볼 수 있어요. 로그인 뒤에 있는 텍스트, 자동화된 브라우저를 차단하는 페이지, 이미지나 SVG로 그린 글자는 읽지 않으므로 그 폰트는 나타나지 않아요.
네. Google Fonts, Adobe Fonts, 사이트 자체 서버 등 어디서 오든 페이지가 렌더링하는 웹 폰트라면 모두 감지해요. Google 폰트는 실제 서체로 미리 보여 주고, 그 밖의 폰트는 대체 폰트로 표시해요.
네, 요소 하나씩 확인할 수 있어요. Chrome이나 Edge에서 텍스트를 마우스 오른쪽 버튼으로 클릭하고 '검사'를 선택한 뒤, '계산됨' 탭을 '렌더링된 글꼴'까지 스크롤하면 실제로 그려진 폰트 이름이 나와요. Firefox에서는 '검사기'의 '글꼴' 패널에 선택한 요소의 폰트와 페이지가 불러온 모든 폰트가 표시돼요.
이 도구는 폰트만 보여 줘요. Design Extractor의 DESIGN.md는 사이트의 색상, 전체 타입 스케일, 간격, 컴포넌트 규칙을 코딩 에이전트가 따를 수 있는 파일 하나에 담아요.