mogee.
<< BACK
#웹개발#폰트#한국어폰트#CSS#Google Fonts#손글씨

한국어 손글씨 폰트 9종 — 웹 서비스에 바로 적용하는 방법

DATE: 2026년 3월 27일TIME: 11분 읽기VIEWS: 16

한국어 손글씨 폰트 9종 — 웹 서비스에 바로 적용하는 방법

라인프 앱을 개발하면서 9가지 한국어 손글씨 폰트를 직접 적용해봤는데, 이걸 웹 서비스나 강의 자료에도 활용하고 싶은 분들을 위해 정리했습니다.

폰트는 크게 두 종류로 나뉩니다.

① Google Fonts (6개) — 설치 없이 바로 사용

아래 6개는 Google Fonts에 등록되어 있어서 HTML 한 줄만 추가하면 됩니다.

폰트 미리보기

개구 · Gaegu

오늘 하루도 수고했어요 ✨

귀엽고 동글동글한 손글씨체
펜글씨 · Nanum Pen Script

오늘 하루도 수고했어요 ✨

자연스러운 펜 필기체
멜로디 · Hi Melody

오늘 하루도 수고했어요 ✨

부드럽고 감성적인 손글씨
감자꽃 · Gamja Flower

오늘 하루도 수고했어요 ✨

투박하고 개성있는 손글씨
세련 · Stylish

오늘 하루도 수고했어요 ✨

도시적이고 세련된 서체
독도 · East Sea Dokdo

오늘 하루도 수고했어요 ✨

힘있고 거칠거칠한 느낌

Step 1 — HTML <head>에 추가

<link href="https://fonts.googleapis.com/css2?family=Gaegu&family=Nanum+Pen+Script&family=Hi+Melody&family=Gamja+Flower&family=Stylish&family=East+Sea+Dokdo&display=swap" rel="stylesheet">

Step 2 — CSS에서 사용

.font-gaegu      { font-family: 'Gaegu', cursive; }
.font-nanum      { font-family: 'Nanum Pen Script', cursive; }
.font-melody     { font-family: 'Hi Melody', cursive; }
.font-gamja      { font-family: 'Gamja Flower', cursive; }
.font-stylish    { font-family: 'Stylish', sans-serif; }
.font-dokdo      { font-family: 'East Sea Dokdo', cursive; }

② 로컬 폰트 (3개) — 파일 다운로드 후 서버에 업로드

아래 3개는 Google Fonts에 없어서 .ttf 파일을 직접 다운로드해야 합니다. 모두 무료로 사용 가능한 공개 폰트입니다.

영월체

  • 다운로드: 공공누리 포털
  • 라이선스: 공공누리 제1유형 (상업적 사용 가능)
  • 느낌: 따뜻하고 정감있는 손글씨

행복고흥체 (고흥체)

KOTRA 손글씨체

  • 다운로드: KOTRA 공식 사이트
  • 라이선스: 무료 배포 (출처 표기 권장)
  • 느낌: KOTRA 공식 손글씨체, 깔끔하고 친근함

폴더 구조

your-project/
├── index.html
├── fonts/              ← 여기에 .ttf 파일 넣기
│   ├── Yeongwol.ttf
│   ├── HappinessGoheungM.ttf
│   └── KotraSongeulssi.ttf
└── style.css

CSS @font-face 선언

@font-face {
  font-family: 'Yeongwol';
  src: url('/fonts/Yeongwol.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'HappinessGoheung';
  src: url('/fonts/HappinessGoheungM.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'KotraSongeulssi';
  src: url('/fonts/KotraSongeulssi.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

전체 적용 예시 (HTML)

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Gaegu&family=Nanum+Pen+Script&family=Hi+Melody&family=Gamja+Flower&family=Stylish&family=East+Sea+Dokdo&display=swap" rel="stylesheet">

  <!-- 로컬 폰트 -->
  <style>
    @font-face {
      font-family: 'Yeongwol';
      src: url('/fonts/Yeongwol.ttf') format('truetype');
    }
    @font-face {
      font-family: 'HappinessGoheung';
      src: url('/fonts/HappinessGoheungM.ttf') format('truetype');
    }
    @font-face {
      font-family: 'KotraSongeulssi';
      src: url('/fonts/KotraSongeulssi.ttf') format('truetype');
    }
  </style>
</head>
<body>
  <p style="font-family: 'Gaegu', cursive; font-size: 24px;">개구체로 쓴 문장</p>
  <p style="font-family: 'Yeongwol', sans-serif; font-size: 24px;">영월체로 쓴 문장</p>
</body>
</html>

Next.js / React 프로젝트라면?

globals.css 상단에 추가하세요.

@import url('https://fonts.googleapis.com/css2?family=Gaegu&family=Nanum+Pen+Script&family=Hi+Melody&family=Gamja+Flower&family=Stylish&family=East+Sea+Dokdo&display=swap');

@font-face {
  font-family: 'Yeongwol';
  src: url('/fonts/Yeongwol.ttf') format('truetype');
}
/* ... 나머지 로컬 폰트도 동일하게 */

Google Slides / Canva / Figma에서 쓰려면?

툴방법
Google Slides상단 메뉴 → 더보기 글꼴 → 영문명 검색 (예: Gaegu)
Canva브랜드 키트 → 폰트 업로드 → .ttf 파일 직접 업로드
FigmaMac에 폰트 설치 (.ttf 더블클릭) → Figma 재시작

라이선스 정리

폰트라이선스상업적 사용
개구, 펜글씨, 멜로디, 감자꽃, 세련, 독도OFL (Google Fonts)✓ 가능
영월체공공누리 제1유형✓ 가능
행복고흥체공공누리 제1유형✓ 가능
KOTRA 손글씨무료 배포✓ 가능 (출처 표기 권장)

모두 무료로 상업적으로도 사용 가능한 폰트들이라 부담 없이 쓰시면 됩니다.

이 글 공유하기

[X] X에 공유

// SPONSORED

[>]댓글

아직 댓글이 없어요. 첫 댓글을 남겨보세요!