• 고객센터
  • ★ 웹 무료강의

★ 웹 무료강의

고객센터공지사항자료실★ 웹 무료강의추천유튜브강의

모던DS 웹에이전시

웹 무료강의 | 프론트엔드 강의

CSS 웹폰트(Web Font)의 이해와 사용법

페이지 정보

profile_image
작성자 모던DS
조회 1회 작성일 26-02-26 00:33

본문

웹폰트(Web Font)의 이해와 사용법


1. 웹폰트란?

  • 개념: 방문자의 컴퓨터에 특정 글꼴이 설치되어 있지 않아도, 웹 브라우저가 서버에서 글꼴 파일을 자동으로 다운로드하여 화면에 표시해 주는 기술입니다.

  • 장점: 모든 사용자에게 디자이너가 의도한 동일한 글꼴을 보여줄 수 있어 브랜딩과 가독성 유지에 필수적입니다.


2. 웹폰트 사용 방법 (2가지)

① 구글 폰트(Google Fonts) 등 서비스 이용하기 (외부 연결)

가장 쉽고 많이 사용하는 방법입니다. 구글이 제공하는 서버 주소를 연결합니다.

  • HTML에서 연결: <head> 태그 안에 <link> 태그를 넣습니다.

    HTML
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap" rel="stylesheet">

  • CSS에서 사용: font-family 속성으로 호출합니다.

    CSS
    body { font-family: 'Noto Sans KR', sans-serif; }

② @font-face 속성 사용하기 (직접 업로드)

폰트 파일을 직접 서버에 올리고 CSS에서 정의하여 사용합니다.

  • 작성법:

    CSS
    @font-face {
  font-family: 'MyCustomFont'; /* 사용할 이름 정의 */
  src: url('fonts/myfont.woff2') format('woff2'), /* 가장 가볍고 권장되는 포맷 */
       url('fonts/myfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}


3. 웹폰트 파일 형식 (확장자)

용량과 브라우저 호환성에 따라 여러 형식이 있습니다.

  • WOFF2: 가장 높은 압축률을 가진 현대적 표준 형식 (권장)

  • WOFF: 대부분의 모던 브라우저 지원

  • TTF: 가장 일반적인 글꼴 파일 (웹에서는 용량이 큼)


4. 주의사항: 웹폰트 성능 (Performance)

  • 로딩 속도: 폰트 파일이 너무 크면 웹페이지가 느려질 수 있습니다.필요한 굵기(Weight)만 골라서 가져오는 것이 좋습니다.

  • FOIT / FOUT: 폰트가 다운로드되기 전까지 글자가 안 보이거나(FOIT), 기본 글꼴로 보이다가 갑자기 바뀌는(FOUT) 현상이 발생할 수 있습니다.
    이를 조절하기 위해 display=swap 옵션을 사용합니다.


 무료 웹폰트의 종류와 활용 


1. 대표적인 무료 웹폰트 서비스

  • 구글 폰트 (Google Fonts): 가장 대중적인 글로벌 무료 서비스입니다. 전 세계의 다양한 언어와 글꼴을 제공하며, 서버 안정성이 매우 높습니다.

  • 링크: https://fonts.google.com/

  • 눈누 (noonnu): 상업적으로 이용 가능한 한글 무료 폰트들을 한눈에 모아둔 국내 사이트입니다. 웹폰트용 코드를 복사하기 매우 편리합니다.

  • 링크: https://noonnu.cc/


2. 실무에서 가장 많이 쓰는 한글 무료 폰트

  • Noto Sans KR (본고딕): 구글과 어도비가 공동 개발한 폰트로, 어떤 웹사이트 디자인에도 잘 어울리는 가장 대중적인 고딕체입니다.

  • 나눔글꼴 (나눔고딕, 나눔명조 등): 네이버에서 제작하여 배포한 국민 폰트로 가독성이 뛰어납니다.

  • Pretendard (프리텐다드): 최근 실무 웹 디자인에서 가장 선호되는 폰트로, Apple의 시스템 폰트와 유사한 깔끔한 디자인이 특징입니다.


3. 무료 폰트 사용 시 주의사항 (라이선스)

  • 상업적 이용 가능 여부: 대부분의 무료 폰트가 무료이지만, 로고 제작이나 인쇄물 등 사용 범위에 제한이 있을 수 있으니 라이선스 규정을 확인해야 합니다.

  • 임베딩(Embedding) 허용: 웹사이트에 폰트를 포함시켜 보여주는 '웹폰트 방식'이 허용되는지 확인이 필요합니다.


4. 성능 최적화 팁

  • 필요한 굵기만 선택: 모든 굵기(Thin, Light, Regular, Bold 등)를 다 가져오면 로딩 속도가 느려집니다. 실제 사용할 2~3개 굵기만 선택하세요.

  • font-display: swap: 폰트 파일이 다운로드되기 전까지 글자가 보이지 않는 현상을 방지하기 위해 CSS에 이 속성을 추가하는 것이 좋습니다.

 

추가 무료 웹폰트 서비스 링크

1. 어도비 폰트 (Adobe Fonts)

어도비 계정(무료 계정 포함)만 있으면 수천 개의 고퀄리티 폰트를 웹 프로젝트에 바로 연결할 수 있습니다.

2. 공유마당 (Gongu Madang)

한국저작권위원회에서 운영하며, 국가에서 배포한 공공 안심 글꼴(안동엄마까투리체, 제주한라산체 등)을 모아둔 곳입니다.

3. 네이버 글꼴 (Naver Fonts)

나눔고딕, 나눔명조, 그리고 최근 매달 배포되는 나눔손글씨 등을 제공합니다.

4. 다폰트 (DaFont)

영문 폰트 위주이지만, 독특하고 예술적인 디자인 서체가 압도적으로 많습니다.

  • 주의: 폰트마다 라이선스(개인용/상업용)가 다르므로 확인이 필수입니다.

  • 링크: https://www.dafont.com/


[구글 폰트 가져오기]

 f6da24a1423ab7b19980bdad13955e9a_1772034776_9132.png 

 

HTML
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>웹 폰트 사용하기</title>
  <style>
    /* 구글 폰트 사용하기 */

    .wfont {
      font-family: 'Dancing Script', cursive;
    }
  </style>

</head>
<body>
  <h1 class="wfont">HTML</h1>
  <h1>CSS</h1>
</body>
</html>