필수 무료 웹 폰트

웹 퍼블리싱 시 자주 사용되며, 저작권 걱정 없이 상업적으로 완전히 무료인 필수 폰트 모음입니다.
각 폰트의 @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; */

Pretendard

Noto Sans KR

Gmarket Sans

Tmoney RoundWind

Nanum Square Neo

S-Core Dream

Spoqa Han Sans Neo

Jalnan

CookieRun