미리보고 마음에 들면 link 태그랑 CSS를 그대로 복사해서 붙이면 됩니다.
전부 SIL Open Font License 1.1이라 상업적으로 쓸 수 있습니다. 굵기와 배포 주소, 어디에 쓰면 좋고 어디에 쓰면 안 되는지를 폰트마다 정리했습니다.
한글 웹폰트가 영문보다 무거운 이유는 글자 수다. 현대 한글은 조합 가능한 음절이 11,172자, 완성형 표준 KS X 1001만 따져도 2,350자다. 요즘 CDN은 이 글자들을 조각으로 나눠 두고 화면에 나온 글자가 든 조각만 내려보낸다. 그래서 폰트 하나 붙였다고 수 MB를 받지는 않는다.
폰트 26개
다람쥐 헌 쳇바퀴에 타고파 Ag 123
본문·UI 기본값으로 가장 많이 쓰인다. 가변 폰트라 굵기 전부 넣어도 용량 부담이 적다.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css">
<style>
body { font-family: "Pretendard Variable", sans-serif; }
</style>다람쥐 헌 쳇바퀴에 타고파 Ag 123
프리텐다드보다 글자 폭이 좁다. 좁은 카드나 사이드바에서 덜 답답하다.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/variable/woff2/SUIT-Variable.css">
<style>
body { font-family: "SUIT Variable", sans-serif; }
</style>다람쥐 헌 쳇바퀴에 타고파 Ag 123
안 깨지는 게 최대 장점. 수록 글자 수가 가장 많아서 한자·특수문자까지 버틴다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;200;300;400;500;600;700;800;900&display=swap">
<style>
body { font-family: "Noto Sans KR", sans-serif; }
</style>다람쥐 헌 쳇바퀴에 타고파 Ag 123
긴 글 읽히는 페이지에 쓴다. 굵기 200까지 있어서 큰 제목도 얇게 뽑힌다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;800;900&display=swap">
<style>
body { font-family: "Noto Serif KR", sans-serif; }
</style>다람쥐 헌 쳇바퀴에 타고파 Ag 123
국내 웹에서 제일 오래 굴러온 폰트. 무난하지만 요즘 감성은 아니다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap">
<style>
body { font-family: "Nanum Gothic", sans-serif; }
</style>다람쥐 헌 쳇바퀴에 타고파 Ag 123
따옴표 인용문이나 후기 섹션에 한 덩어리만 써도 분위기가 산다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@400;700;800&display=swap">
<style>
body { font-family: "Nanum Myeongjo", sans-serif; }
</style>다람쥐 헌 쳇바퀴에 타고파 Ag 123
한글이 섞인 코드 블록에서 글자 폭이 안 틀어진다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nanum+Gothic+Coding:wght@400;700&display=swap">
<style>
body { font-family: "Nanum Gothic Coding", sans-serif; }
</style>다람쥐 헌 쳇바퀴에 타고파 Ag 123
영문이 같이 나오는 화면에 맞다. 한글과 영문 인상이 안 따로 논다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@100;200;300;400;500;600;700&display=swap">
<style>
body { font-family: "IBM Plex Sans KR", sans-serif; }
</style>다람쥐 헌 쳇바퀴에 타고파 Ag 123
획이 부드러워서 소개 페이지나 브랜드 사이트에 잘 붙는다. 굵기가 하나뿐이다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Gowun+Dodum:wght@400&display=swap">
<style>
body { font-family: "Gowun Dodum", sans-serif; }
</style>다람쥐 헌 쳇바퀴에 타고파 Ag 123
본명조보다 가볍다. 에세이·포트폴리오처럼 여백 많은 페이지에 쓴다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Gowun+Batang:wght@400;700&display=swap">
<style>
body { font-family: "Gowun Batang", sans-serif; }
</style>다람쥐 헌 쳇바퀴에 타고파 Ag 123
제목용 명조. 본문에 깔면 눈이 금방 피로해진다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Song+Myung:wght@400&display=swap">
<style>
body { font-family: "Song Myung", sans-serif; }
</style>다람쥐 헌 쳇바퀴에 타고파 Ag 123
썸네일·배너 제목용. 화면에서 제일 큰 글자 한 줄에만 쓴다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Black+Han+Sans:wght@400&display=swap">
<style>
body { font-family: "Black Han Sans", sans-serif; }
</style>다람쥐 헌 쳇바퀴에 타고파 Ag 123
각지고 단단한 인상. 스포츠·게임 쪽 제목에 자주 보인다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Do+Hyeon:wght@400&display=swap">
<style>
body { font-family: "Do Hyeon", sans-serif; }
</style>다람쥐 헌 쳇바퀴에 타고파 Ag 123
동글동글해서 아이·반려동물·먹거리 쪽에 맞는다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Jua:wght@400&display=swap">
<style>
body { font-family: "Jua", sans-serif; }
</style>다람쥐 헌 쳇바퀴에 타고파 Ag 123
복고 간판 느낌. 짧은 단어일수록 살아난다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Gugi:wght@400&display=swap">
<style>
body { font-family: "Gugi", sans-serif; }
</style>다람쥐 헌 쳇바퀴에 타고파 Ag 123
획이 얇은 산세리프. 사진 위에 올리는 짧은 문구에 어울린다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Stylish:wght@400&display=swap">
<style>
body { font-family: "Stylish", sans-serif; }
</style>다람쥐 헌 쳇바퀴에 타고파 Ag 123
굵기 차이가 뚜렷해서 제목과 본문을 한 폰트로 처리할 수 있다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sunflower:wght@300;500;700&display=swap">
<style>
body { font-family: "Sunflower", sans-serif; }
</style>다람쥐 헌 쳇바퀴에 타고파 Ag 123
붓 느낌이 살짝 남은 손글씨. 카페·공방 쪽 제목에 쓴다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Yeon+Sung:wght@400&display=swap">
<style>
body { font-family: "Yeon Sung", sans-serif; }
</style>다람쥐 헌 쳇바퀴에 타고파 Ag 123
손편지 느낌. 크기를 좀 키워야 읽힌다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nanum+Pen+Script:wght@400&display=swap">
<style>
body { font-family: "Nanum Pen Script", sans-serif; }
</style>다람쥐 헌 쳇바퀴에 타고파 Ag 123
획이 굵고 흘려 쓴 붓글씨. 문구가 길면 안 읽힌다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nanum+Brush+Script:wght@400&display=swap">
<style>
body { font-family: "Nanum Brush Script", sans-serif; }
</style>다람쥐 헌 쳇바퀴에 타고파 Ag 123
연필로 쓴 것 같은 글씨. 손글씨 중에는 드물게 굵기가 셋이다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Gaegu:wght@300;400;700&display=swap">
<style>
body { font-family: "Gaegu", sans-serif; }
</style>다람쥐 헌 쳇바퀴에 타고파 Ag 123
얇고 동그란 손글씨. 다이어리·굿즈 목업에 자주 쓰인다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Hi+Melody:wght@400&display=swap">
<style>
body { font-family: "Hi Melody", sans-serif; }
</style>다람쥐 헌 쳇바퀴에 타고파 Ag 123
삐뚤빼뚤한 매직 글씨. 낙서 느낌이 필요할 때만 쓴다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Dokdo:wght@400&display=swap">
<style>
body { font-family: "Dokdo", sans-serif; }
</style>다람쥐 헌 쳇바퀴에 타고파 Ag 123
만화 말풍선 같은 글씨. 짧은 대사에 어울린다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poor+Story:wght@400&display=swap">
<style>
body { font-family: "Poor Story", sans-serif; }
</style>다람쥐 헌 쳇바퀴에 타고파 Ag 123
세로로 길쭉하고 좁다. 폭이 모자란 자리에 제목을 넣을 때 쓴다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cute+Font:wght@400&display=swap">
<style>
body { font-family: "Cute Font", sans-serif; }
</style>다람쥐 헌 쳇바퀴에 타고파 Ag 123
옛날 극장 간판 같은 인상. 레트로 콘셉트 제목에 쓴다.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Kirang+Haerang:wght@400&display=swap">
<style>
body { font-family: "Kirang Haerang", sans-serif; }
</style>검색 결과가 없습니다.
현대 한글은 조합할 수 있는 음절이 11,172자입니다. 완성형 표준인 KS X 1001만 따져도 2,350자예요. 알파벳 26자로 끝나는 영문 폰트와 자릿수가 다릅니다. 그래서 요즘 한글 웹폰트는 글자를 수십 개 조각으로 쪼개 두고, 화면에 실제로 나온 글자가 든 조각만 내려받습니다. Google Fonts와 프리텐다드 dynamic subset이 모두 이 방식이라, 폰트 하나 붙였다고 수 MB를 받지는 않습니다.
이 사이트에 있는 폰트는 전부 SIL Open Font License(OFL) 1.1입니다. OFL은 상업적 사용, 수정, 재배포를 허용합니다. 금지하는 건 폰트 파일 자체를 팔거나, 원 폰트와 헷갈리는 이름으로 배포하는 것입니다. 다만 라이선스는 배포처가 바꿀 수 있으니, 계약이 걸린 작업이라면 각 폰트의 공식 페이지에서 원문을 한 번 확인하세요.
대부분은 CDN이 낫습니다. 서브셋 분할과 캐시 정책이 이미 잡혀 있고, 브라우저가 필요한 조각만 받아 갑니다. 직접 호스팅이 필요한 경우는 세 가지입니다. 외부 요청이 막힌 사내망, 개인정보 이슈로 외부 CDN 요청을 피해야 하는 서비스, 폰트를 서브셋으로 직접 잘라 첫 화면 용량을 더 줄여야 하는 경우.
폰트를 받는 동안 대체 폰트로 먼저 그려서 생기는 현상입니다(FOUT). 이 사이트가 주는 코드에는 display=swap이 들어 있어서, 글자가 안 보이는 시간 대신 바뀌는 쪽을 택합니다. 깜빡임을 더 줄이려면 <link rel="preconnect">를 head 맨 위에 두고, CSS의 font-family 대체 목록을 화면에 실제로 쓰는 폰트와 비슷한 굵기로 맞추세요.
정하기 어려우면 프리텐다드입니다. 굵기가 9종이고 가변 폰트라 전부 넣어도 부담이 적습니다. 사용자가 어떤 글자를 넣을지 모르는 서비스(이름, 주소, 한자)라면 본고딕이 안전합니다. 수록 글자 수가 가장 많습니다. 글을 읽히는 게 목적인 페이지라면 본명조나 고운바탕처럼 명조 계열을 봅니다.
가변 폰트는 굵기를 전부 넣어도 파일이 하나입니다. 프리텐다드, SUIT, 본고딕이 여기 해당합니다. 가변이 아닌 폰트는 굵기 하나가 파일 하나라, 400과 700만 고르는 편이 낫습니다. 이 사이트의 각 폰트 페이지에 가변 여부를 적어 뒀습니다.