필수 무료 웹 폰트

웹 퍼블리싱 시 자주 사용되며, 저작권 걱정 없이 상업적으로 완전히 무료인 필수 폰트 모음입니다.
각 폰트의 @import 구문과 CSS font-family를 클릭 한 번으로 복사하여 프로젝트에 바로 적용하세요.

Pretendard (프리텐다드)

애플의 산돌고딕 Neo와 가장 유사하며 가독성이 매우 뛰어난 현재 실무 1티어 폰트입니다.

지원 굵기 (Weights)100(Thin) ~ 900(Black) 전 굵기 지원

미리보기 (Live Preview)

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

The quick brown fox jumps over the lazy dog.

0 1 2 3 4 5 6 7 8 9 ! @ # $ % & * ( )

1. CSS 맨 위에 추가 (@import)

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

2. CSS 속성 적용 (font-family)

font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;

Noto Sans KR (본고딕)

구글과 어도비가 공동 개발한 가장 대중적이고 안정적인 고딕 폰트입니다.

지원 굵기 (Weights)100, 300, 400, 500, 700, 900 지원

미리보기 (Live Preview)

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

The quick brown fox jumps over the lazy dog.

0 1 2 3 4 5 6 7 8 9 ! @ # $ % & * ( )

1. CSS 맨 위에 추가 (@import)

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

2. CSS 속성 적용 (font-family)

font-family: 'Noto Sans KR', sans-serif;
/* font-weight: 400; (굵기 조절 가능) */

Gmarket Sans (지마켓 산스)

지마켓에서 배포한 타이틀이나 로고 디자인, 제목에 어울리는 세련된 폰트입니다.

지원 굵기 (Weights)Light, Medium, Bold (굵기별 개별 폰트명 사용)

미리보기 (Live Preview)

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

The quick brown fox jumps over the lazy dog.

0 1 2 3 4 5 6 7 8 9 ! @ # $ % & * ( )

1. CSS 맨 위에 추가 (@import)

@import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff');
@import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff');
@import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff');

2. CSS 속성 적용 (font-family)

font-family: 'GmarketSansLight', sans-serif;
/* font-family: 'GmarketSansMedium', sans-serif; */
/* font-family: 'GmarketSansBold', sans-serif; */

Tmoney RoundWind (티머니 둥근바람)

끝이 둥글게 처리되어 친근하고 부드러운 느낌을 주는 가독성 좋은 폰트입니다.

지원 굵기 (Weights)Regular, ExtraBold (굵기별 개별 폰트명 사용)

미리보기 (Live Preview)

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

The quick brown fox jumps over the lazy dog.

0 1 2 3 4 5 6 7 8 9 ! @ # $ % & * ( )

1. CSS 맨 위에 추가 (@import)

@import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/TmoneyRoundWindRegular.woff');
@import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.0/TmoneyRoundWindExtraBold.woff');

2. CSS 속성 적용 (font-family)

font-family: 'TmoneyRoundWindRegular', sans-serif;
/* font-family: 'TmoneyRoundWindExtraBold', sans-serif; */

Nanum Square Neo (나눔 스퀘어 네오)

기존 나눔 스퀘어보다 둥글고 네모반듯한 느낌이 더해져 본문과 제목 모두 잘 어울립니다.

지원 굵기 (Weights)Light, Regular, Bold, ExtraBold, Heavy 지원

미리보기 (Live Preview)

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

The quick brown fox jumps over the lazy dog.

0 1 2 3 4 5 6 7 8 9 ! @ # $ % & * ( )

1. CSS 맨 위에 추가 (@import)

@import url('https://hangeul.pstatic.net/hangeul_static/css/nanum-square-neo.css');

2. CSS 속성 적용 (font-family)

font-family: 'NanumSquareNeo', sans-serif;
/* font-weight: 700; (굵기 조절 가능) */

S-Core Dream (에스코어 드림)

꽉 찬 네모꼴의 현대적인 돋움체로, 제목과 본문 모두 깔끔하고 묵직하게 어울립니다.

지원 굵기 (Weights)1(Thin) ~ 9(Black) 지원 (굵기별 개별 폰트명 사용)

미리보기 (Live Preview)

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

The quick brown fox jumps over the lazy dog.

0 1 2 3 4 5 6 7 8 9 ! @ # $ % & * ( )

1. CSS 맨 위에 추가 (@import)

@import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff');
@import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff');
@import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff');

2. CSS 속성 적용 (font-family)

font-family: 'S-CoreDream-3Light', sans-serif;
/* font-family: 'S-CoreDream-5Medium', sans-serif; */
/* font-family: 'S-CoreDream-7ExtraBold', sans-serif; */

Spoqa Han Sans Neo (스포카 한 산스 네오)

토스, 쏘카 등 수많은 기업에서 사용하는, 숫자에 특히 강하고 가독성 높은 UI 전용 폰트입니다.

지원 굵기 (Weights)Thin, Light, Regular, Medium, Bold (굵기별 개별 폰트명 사용)

미리보기 (Live Preview)

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

The quick brown fox jumps over the lazy dog.

0 1 2 3 4 5 6 7 8 9 ! @ # $ % & * ( )

1. CSS 맨 위에 추가 (@import)

@import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Light.woff');
@import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Regular.woff');
@import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SpoqaHanSansNeo-Bold.woff');

2. CSS 속성 적용 (font-family)

font-family: 'SpoqaHanSansNeo-Light', sans-serif;
/* font-family: 'SpoqaHanSansNeo-Regular', sans-serif; */
/* font-family: 'SpoqaHanSansNeo-Bold', sans-serif; */

Jalnan (여기어때 잘난체)

둥글고 두꺼운 형태로 친근하고 유쾌한 느낌을 주어 이벤트 배너나 썸네일 제목으로 찰떡입니다.

지원 굵기 (Weights)단일 굵기 (Bold)

미리보기 (Live Preview)

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

The quick brown fox jumps over the lazy dog.

0 1 2 3 4 5 6 7 8 9 ! @ # $ % & * ( )

1. CSS 맨 위에 추가 (@import)

@import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_eight@1.0/jalnan.woff');

2. CSS 속성 적용 (font-family)

font-family: 'jalnan', sans-serif;

CookieRun (쿠키런체)

쿠키런 게임 특유의 둥글고 귀여운 아이덴티티가 담겨있어 개성있는 디자인에 제격입니다.

지원 굵기 (Weights)Regular, Bold, Black (굵기별 개별 폰트명 사용)

미리보기 (Live Preview)

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

The quick brown fox jumps over the lazy dog.

0 1 2 3 4 5 6 7 8 9 ! @ # $ % & * ( )

1. CSS 맨 위에 추가 (@import)

@import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/CookieRun-Regular.woff');
@import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/CookieRun-Bold.woff');
@import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/CookieRun-Black.woff');

2. CSS 속성 적용 (font-family)

font-family: 'CookieRun-Regular', sans-serif;
/* font-family: 'CookieRun-Bold', sans-serif; */
/* font-family: 'CookieRun-Black', sans-serif; */

RIDIBatang (리디바탕)

리디북스에서 E-book 가독성을 극대화하기 위해 만든, 화면에서 읽기 가장 편안한 명조체입니다.

지원 굵기 (Weights)단일 굵기 (Regular)

미리보기 (Live Preview)

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

The quick brown fox jumps over the lazy dog.

0 1 2 3 4 5 6 7 8 9 ! @ # $ % & * ( )

1. CSS 맨 위에 추가 (@import)

@import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/RIDIBatang.woff');

2. CSS 속성 적용 (font-family)

font-family: 'RIDIBatang', serif;

BM JUA (배달의민족 주아체)

붓으로 직접 쓴 듯한 자연스럽고 귀여운 느낌을 주어 캐주얼한 배너나 썸네일에 완벽합니다.

지원 굵기 (Weights)단일 굵기 (Regular)

미리보기 (Live Preview)

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

The quick brown fox jumps over the lazy dog.

0 1 2 3 4 5 6 7 8 9 ! @ # $ % & * ( )

1. CSS 맨 위에 추가 (@import)

@import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMJUA.woff');

2. CSS 속성 적용 (font-family)

font-family: 'BMJUA', sans-serif;

Cafe24 Ssurround (카페24 써라운드)

글자 간 여백이 적고 묵직하여 시선을 확 사로잡아야 하는 제목이나 썸네일 텍스트로 강력 추천합니다.

지원 굵기 (Weights)단일 굵기 (Bold)

미리보기 (Live Preview)

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

The quick brown fox jumps over the lazy dog.

0 1 2 3 4 5 6 7 8 9 ! @ # $ % & * ( )

1. CSS 맨 위에 추가 (@import)

@import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Ssurround.woff');

2. CSS 속성 적용 (font-family)

font-family: 'Cafe24Ssurround', sans-serif;

SBAggro (어그로체)

이름처럼 이목을 확 끄는 독특한 형태의 폰트로, 밀도 높고 트렌디한 디자인에 어울립니다.

지원 굵기 (Weights)Light, Medium, Bold (굵기별 개별 폰트명 사용)

미리보기 (Live Preview)

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

The quick brown fox jumps over the lazy dog.

0 1 2 3 4 5 6 7 8 9 ! @ # $ % & * ( )

1. CSS 맨 위에 추가 (@import)

@import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroL.woff');
@import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroM.woff');
@import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroB.woff');

2. CSS 속성 적용 (font-family)

font-family: 'SBAggroL', sans-serif;
/* font-family: 'SBAggroM', sans-serif; */
/* font-family: 'SBAggroB', sans-serif; */

SUIT (수트)

프리텐다드와 더불어 최근 가장 각광받는 고딕체로, 매우 세련되고 안정감 있는 UI를 만듭니다.

지원 굵기 (Weights)Thin ~ Heavy (9가지 굵기 지원)

미리보기 (Live Preview)

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

The quick brown fox jumps over the lazy dog.

0 1 2 3 4 5 6 7 8 9 ! @ # $ % & * ( )

1. CSS 맨 위에 추가 (@import)

@import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2');
@import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Bold.woff2');

2. CSS 속성 적용 (font-family)

font-family: 'SUIT', sans-serif;

NEXON Lv2 Gothic (넥슨 고딕)

넥슨에서 제작한 가독성 높고 깔끔한 고딕체로, 게임뿐만 아니라 일반 웹 UI에서도 인기가 많습니다.

지원 굵기 (Weights)Light, Regular, Medium, Bold

미리보기 (Live Preview)

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

The quick brown fox jumps over the lazy dog.

0 1 2 3 4 5 6 7 8 9 ! @ # $ % & * ( )

1. CSS 맨 위에 추가 (@import)

@import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic.woff');

2. CSS 속성 적용 (font-family)

font-family: 'NEXON Lv2 Gothic', sans-serif;

BM DoHyeon (배달의민족 도현체)

과거 아크릴판에 자를 대고 커팅해서 만든 간판을 모티브로 한 레트로 감성의 굵고 강렬한 타이틀 폰트입니다.

지원 굵기 (Weights)단일 굵기 (Regular)

미리보기 (Live Preview)

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

The quick brown fox jumps over the lazy dog.

0 1 2 3 4 5 6 7 8 9 ! @ # $ % & * ( )

1. CSS 맨 위에 추가 (@import)

@import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/BMDOHYEON.woff');

2. CSS 속성 적용 (font-family)

font-family: 'BMDOHYEON', sans-serif;

Mapo Flower Island (마포꽃섬)

마포구에서 배포한 우아하고 리듬감 있는 명조체로, 감성적인 에세이나 쇼핑몰 상세페이지에 어울립니다.

지원 굵기 (Weights)단일 굵기 (Regular)

미리보기 (Live Preview)

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

The quick brown fox jumps over the lazy dog.

0 1 2 3 4 5 6 7 8 9 ! @ # $ % & * ( )

1. CSS 맨 위에 추가 (@import)

@import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/MapoFlowerIsland.woff');

2. CSS 속성 적용 (font-family)

font-family: 'MapoFlowerIsland', serif;

ONE Mobile Gothic (원스토어 모바일고딕)

원스토어에서 모바일 환경에서의 최적의 가독성을 위해 개발한 반듯하고 큼직한 고딕 폰트입니다.

지원 굵기 (Weights)Light, Regular, Bold

미리보기 (Live Preview)

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

The quick brown fox jumps over the lazy dog.

0 1 2 3 4 5 6 7 8 9 ! @ # $ % & * ( )

1. CSS 맨 위에 추가 (@import)

@import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-Title.woff');

2. CSS 속성 적용 (font-family)

font-family: 'ONE-Mobile-Title', sans-serif;

Binggrae (빙그레체)

바나나맛 우유 로고를 모티브로 하여 둥글고 부드러우며 따뜻한 느낌을 주는 폰트입니다.

지원 굵기 (Weights)Regular, Bold

미리보기 (Live Preview)

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

The quick brown fox jumps over the lazy dog.

0 1 2 3 4 5 6 7 8 9 ! @ # $ % & * ( )

1. CSS 맨 위에 추가 (@import)

@import url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Binggrae.woff');

2. CSS 속성 적용 (font-family)

font-family: 'Binggrae', sans-serif;

Pretendard

Noto Sans KR

Gmarket Sans

Tmoney RoundWind

Nanum Square Neo

S-Core Dream

Spoqa Han Sans Neo

Jalnan

CookieRun

RIDIBatang

BM JUA

Cafe24 Ssurround

SBAggro

SUIT

NEXON Lv2 Gothic

BM DoHyeon

Mapo Flower Island

ONE Mobile Gothic

Binggrae