폰트 미리보기

이 기기에 설치된 모든 폰트로 원하는 문장을 확인하거나 폰트 파일을 업로드한 뒤 CSS를 복사하세요.

폰트 출처

적용 중인 폰트

이 기기에 설치된 모든 폰트를 나열합니다. Chromium 계열 브라우저에서만 동작하며, 브라우저가 한 번 권한을 요청합니다.

업로드한 폰트

아직 업로드한 폰트가 없습니다.

TTF·OTF·WOFF·WOFF2, 파일당 최대 20 MB. 업로드한 폰트는 이 페이지에만 등록되며 외부로 전송되지 않고 새로 고침하면 사라집니다.

텍스트 및 타이포그래피

크기 44 px

두께

자간 0 px

행간 1.35

스타일

대소문자

글자 색

#0f172a

배경색

#ffffff

정렬

미리보기

폰트system-ui출처총칭 패밀리

다람쥐 헌 쳇바퀴에 타고파 0123456789

문자 모음

CSS

font-family: system-ui;
font-size: 44px;
font-weight: 400;
font-style: normal;
letter-spacing: 0px;
line-height: 1.35;
text-align: left;
text-transform: none;
color: #0f172a;
background-color: #ffffff;

폰트 미리보기 도구란?

웹에서 흔히 볼 수 있는 폰트 미리보기는 대부분 똑같은 '웹 안전 폰트' 목록만 보여 줍니다. 이미 다 아는 목록이고, 정작 이 컴퓨터에 어떤 폰트가 설치되어 있는지는 알려 주지 않습니다. 이 페이지는 반대로 여러분의 환경에서 출발합니다.

폰트를 가져오는 방법은 세 가지입니다. 총칭 패밀리(system-ui, sans-serif, serif, monospace)는 모든 브라우저에서 동작합니다. '로컬 폰트 불러오기'는 브라우저의 Local Font Access API로 이 기기에 설치된 서체를 모두 나열해 선택 목록에 채웁니다. 윤곽선이 이미 기기에 있으므로 내려받기는 발생하지 않고 즉시 렌더링됩니다. 또는 폰트 파일(TTF, OTF, WOFF, WOFF2)을 업로드하면 이 세션 동안 등록되므로, 라이선스가 있는 브랜드 서체를 설치하지 않고도 교정 확인을 할 수 있습니다.

폰트를 고르고 문장을 입력한 뒤 크기, 두께, 스타일, 자간, 행간, 색상, 정렬을 조정하세요. 문자 모음 줄에서 숫자와 문장부호의 동작을 확인할 수 있고, CSS 블록은 그대로 복사할 수 있습니다. 적용 중인 폰트가 업로드된 파일이라면 @font-face 골격도 함께 포함됩니다.

입력한 문장과 업로드한 파일은 브라우저 밖으로 나가지 않습니다.

사용 방법

시작하기

'폰트 출처' 패널에서 폰트를 고릅니다. 총칭 패밀리는 어디에서나 동작하고, '로컬 폰트 불러오기'를 누르면 이 기기에 설치된 모든 폰트가 나열됩니다.
이미 파일로 가진 폰트를 미리 보려면 '폰트 파일 업로드'에서 TTF, OTF, WOFF, WOFF2를 선택하세요. 이 세션 동안만 등록되며 같은 선택 목록에 나타납니다.
교정할 문장을 입력하세요. 헤드라인, 버튼 라벨, 제품명 등.
크기, 두께, 스타일, 자간, 행간, 정렬, 대소문자, 두 가지 색을 조정하세요. 미리보기에 적용되는 CSS 속성은 스타일시트에 작성하는 것과 동일합니다.
CSS 블록을 복사하세요. 업로드한 폰트라면 @font-face 골격도 포함되며, 원본 파일명이 경로 자리에 들어 있습니다.

정확한 결과를 위한 요령

나열된 목록은 정확하지만 이 기기에 대한 정보일 뿐입니다. 여기에 설치된 것이 방문자에게도 있다는 뜻은 아니므로, 운영 CSS에는 반드시 폴백 스택을 남기세요.
로컬 폰트 나열은 Chromium 계열 전용이며 보안 컨텍스트(HTTPS 또는 localhost)가 필요합니다. Safari와 Firefox에서는 버튼을 숨기고 이유를 표시합니다. 업로드는 계속 사용할 수 있습니다.
여러 두께나 스타일을 가진 패밀리는 선택 목록에 한 번만 나타납니다. 실제로 들어 있는 글꼴 면은 두께 컨트롤과 기울임꼴 토글로 이동하세요.
업로드한 폰트는 메모리에만 존재하며 새로 고침하면 사라지고 디스크에도 기록되지 않습니다. 설정으로 피할 수 있는 제약이 아니라 의도된 동작입니다.
큰 CJK 폰트(10 MB 이상)는 파싱에 시간이 조금 걸립니다. 디코딩이 끝나는 대로 선택 목록이 갱신됩니다.

활용 사례

라이선스 서체·브랜드 서체 교정파일을 업로드하고 실제 헤드라인을 운영에 적용할 크기로 입력해 읽어 보세요. 설치가 필요 없고 시스템에 부작용도 남지 않으며, 파일은 브라우저 밖으로 나가지 않습니다.

기기에 설치된 폰트 점검'로컬 폰트 불러오기'로 정확한 목록을 얻을 수 있습니다. 디자인 인수 자료가 실제로는 존재하지 않는 서체를 전제했을 때나, 후보 중 어떤 것이 상대 기기에 있는지 알아야 할 때 유용합니다.

후보 파일 비교같은 패밀리의 두세 가지 두께나 다른 글꼴 면을 올려두고 크기를 고정한 채 전환하며 비교하세요. 문장이 그대로이므로 기억에 의존하지 않고 글자 형태 자체를 비교하게 됩니다.

자간과 행간 조정자간과 행간은 서체에 따라 최적값이 달라집니다. 기하학적 산세리프는 작은 크기에서 자간을 약간 넓히는 편이 좋고, 한중일 텍스트는 라틴 텍스트보다 큰 행간을 두어도 무너지지 않습니다. 슬라이더를 움직이며 문자 모음 줄을 보세요.

숫자와 문장부호 확인고정폭 숫자인지 비례 숫자인지, 1·4·7의 형태, @ # &가 어떻게 그려지는지는 데이터가 많은 화면에서 결정적입니다. 문자 모음 줄이 현재 설정 그대로 모두 펼쳐 보여 줍니다.

바로 붙여넣을 CSS 생성모든 컨트롤이 CSS 블록에 반영됩니다. 적용 중인 폰트가 업로드된 파일이면 올바른 format() 키워드가 붙은 @font-face 규칙도 함께 출력되므로, 남은 작업은 URL 교체뿐입니다.

로컬 폰트와 업로드의 처리 방식

여기서는 서로 관련 없는 두 개의 브라우저 API가 동작하며, 동작 방식은 크게 다릅니다.

설치된 폰트 나열에는 Local Font Access API를 씁니다. window.queryLocalFonts()는 설치된 글꼴 면마다 패밀리명·전체 이름·PostScript 이름·스타일이 담긴 레코드를 반환합니다. 페이지는 이를 패밀리명으로 묶어 정렬한 뒤 선택 목록에 넘깁니다. 렌더링에 내려받기는 필요 없고, 패밀리명을 그대로 CSS에 넘기면 운영체제가 윤곽선을 제공합니다. 이는 여러분이 스타일시트에 작성했을 때와 완전히 같은 경로입니다. Chromium 계열은 한 번의 권한 요청 뒤에 이 API를 제공하지만, Safari와 Firefox는 아예 구현하지 않았으므로 실패하도록 두지 않고 진입점 자체를 숨깁니다.

업로드에는 Font Loading API를 씁니다. 파일을 ArrayBuffer로 읽어 new FontFace(family, buffer)에 넘기고 load()한 뒤 document.fonts에 추가합니다. 이 순간부터 그 폰트는 다른 패밀리와 다를 바 없이 CSS에서 이름으로 참조할 수 있습니다.

queryLocalFonts()는 보안 컨텍스트(HTTPS 또는 localhost)를 요구하며, 권한 대화상자를 닫으면 NotAllowedError로 reject됩니다. 예외를 던지는 대신 패널이 두 경우를 모두 표시합니다.
같은 패밀리가 여러 스타일로 나타날 수 있습니다. 목록은 패밀리명으로 중복을 제거하므로 각 서체는 한 번만 나타나고, 글꼴 면 선택은 스타일 컨트롤이 담당합니다.
FontFace가 받아들이는 형식은 TTF, OTF, WOFF, WOFF2입니다. 손상된 파일이나 지원하지 않는 형식은 load()가 reject하며, 선택 목록에 깨진 항목을 남기지 않고 오류를 표시합니다.
업로드된 폰트는 메모리에만 보관됩니다. 네트워크 요청도, 디스크 기록도, localStorage 저장도 없습니다. 그래서 새로 고침하면 사라집니다.
총칭 패밀리는 브라우저 내부에서 해석되므로 API가 전혀 필요 없습니다. 다른 두 경로가 모두 막힌 환경에서도 항상 사용할 수 있는 이유입니다.

예시

기기에 설치된 폰트 나열하기

const faces = await window.queryLocalFonts();
// [{ family: "Inter", fullName: "Inter Regular", style: "Regular" }, ...]

const families = [...new Set(faces.map((f) => f.family))].sort();

// 선택하면 그대로 CSS로 전달. 윤곽선은 OS가 제공하며 파일은 내려받지 않음
element.style.fontFamily = `"${families[0]}", sans-serif`;

업로드한 파일 등록하기

const buffer = await file.arrayBuffer();
const face = new FontFace("Aurora Sans", buffer);
await face.load();        // 손상 파일이나 미지원 형식은 여기서 reject
document.fonts.add(face);

// 이후에는 로컬 폰트와 완전히 동일하게 다룰 수 있음
element.style.fontFamily = '"Aurora Sans", sans-serif';

업로드 폰트의 CSS 블록

@font-face {
  font-family: "Aurora Sans";
  src: url("./AuroraSans.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

font-family: "Aurora Sans", sans-serif;
font-size: 44px;
line-height: 1.35;
color: #0f172a;

/* src의 경로는 자리표시자입니다. 실제 호스팅 경로로 바꾸세요 */

자주 묻는 질문

'로컬 폰트 불러오기' 버튼이 보이지 않습니다.

Local Font Access API는 Chromium 계열 브라우저(Chrome, Edge, Opera, Brave)에만 구현되어 있고 보안 출처(HTTPS 또는 localhost)도 필요합니다. Safari와 Firefox에서는 버튼을 숨기고 패널에 이유를 표시합니다. 폰트 파일 업로드와 총칭 패밀리는 모두 계속 사용할 수 있습니다.

설치된 폰트를 읽을 때 서버로 무언가 전송되나요?

아니요. 브라우저가 권한 대화상자를 표시하고, 허용한 뒤 페이지에 전달되는 것은 패밀리명과 스타일명뿐입니다. 폰트 데이터가 읽히거나 업로드되지 않고, 목록이 어디로도 전송되지 않습니다.

업로드한 폰트가 저장되거나 전송되나요?

둘 다 아닙니다. 파일은 메모리로 읽혀 브라우저 폰트 세트에 등록되고, 페이지를 닫거나 새로 고치면 폐기됩니다. 네트워크 요청도, 디스크 기록도, localStorage 저장도 없습니다.

새로 고치면 업로드한 폰트가 사라지는 이유가 무엇인가요?

의도적으로 메모리에만 두기 때문입니다. 유지하려면 폰트 파일을 브라우저 저장소에 기록해야 하는데, 미리보기 도구가 이미 여러분에게 있는 파일의 복사본을 보관할 이유는 없습니다. 계속 쓰려면 다시 업로드하세요.

어떤 형식을 업로드할 수 있나요?

TTF, OTF, WOFF, WOFF2이며 파일당 최대 20 MB입니다. 브라우저의 FontFace가 받아들이는 네 가지 컨테이너 형식입니다. TrueType 컬렉션(.ttc)은 여러 글꼴 면을 한 파일에 묶는 형식으로 지원하지 않으니, 개별 면으로 내보내세요.

어떤 두께는 어색하고 너무 굵게 보입니다.

패밀리에 없는 두께를 지정하면 브라우저가 합성합니다. 가짜 볼드는 윤곽을 덧칠해 두껍게 만들고, 가짜 이탤릭은 글자를 기울입니다. 600만 뭉개 보이고 400과 700이 정상이라면 그 패밀리에 600은 아예 없습니다.

방문자가 설치한 폰트를 알아내는 용도로 쓸 수 있나요?

아니요. 어떤 웹사이트도 그럴 수 없습니다. 나열에는 방문자 기기에서의 명시적 권한 대화상자가 필요하므로, 페이지가 몰래 남의 폰트를 점검하는 것은 불가능합니다. 여기 보이는 목록은 이 기기에 관한 것이며, 그래서 운영 CSS에 폴백이 필요합니다.

@font-face의 src에는 무엇을 넣어야 하나요?

여러분의 빌드가 폰트 파일을 제공하는 경로입니다. 예: /fonts/AuroraSans.woff2. format() 키워드는 확장자에서 올바르게 생성되므로 바꿔야 하는 것은 URL뿐입니다.