Web fonts

김동현·2026년 3월 18일

mdn 학습 번역 - CSS

목록 보기

22/190

안녕하세요! 프론트엔드 개발의 세계로 오신 것을 환영합니다. 디자인의 꽃이자 브랜딩의 핵심인 '웹 폰트(Web fonts)'에 대해 알아보는 시간입니다.

예전에는 사용자의 컴퓨터에 설치된 폰트만 쓸 수 있어서 디자인에 제약이 많았지만, 이제는 웹 폰트 덕분에 디자이너가 의도한 멋진 타이포그래피를 모든 기기에서 똑같이 보여줄 수 있게 되었어요. 실무에서 Next.js의 next/font를 쓰든, 전통적인 CSS를 쓰든 그 뿌리가 되는 지식이니 제가 쉽고 확실하게 짚어드리겠습니다.

웹 폰트 (Web fonts)

이번 모듈의 첫 번째 문서에서는 폰트와 텍스트를 스타일링하기 위해 사용 가능한 기본적인 CSS 기능들을 살펴보았습니다. 이번 글에서는 한 걸음 더 나아가 '웹 폰트(web fonts)'에 대해 자세히 탐구해 보겠습니다. 커스텀 폰트를 웹 페이지에 적용하여 훨씬 더 다양하고 개성 있는 텍스트 스타일링을 구현하는 방법을 알아볼 거예요.

선행 조건 (Prerequisites): HTML로 콘텐츠 구조화하기, CSS 스타일링 기초, 기본적인 텍스트와 폰트 스타일링.


선행 조건 (Prerequisites):	HTML로 콘텐츠 구조화하기, CSS 스타일링 기초, 기본적인 텍스트와 폰트 스타일링.
학습 목표 (Objective):	웹 폰트를 통해 개발자가 '웹 안전 폰트(web safe font)'의 제약을 벗어나 웹 앱에 커스텀 폰트를 사용할 수 있음을 이해하기. 기본 설정 — `@font-face` at-규칙과 자주 쓰이는 속성(descriptors)들. `font-family` 속성으로 웹 폰트 적용하기. 온라인 서비스를 이용해 웹 폰트를 찾고 코드를 생성하는 방법 (예: Font Squirrel 또는 Google Fonts).

학습 목표 (Objective):

웹 폰트를 통해 개발자가 '웹 안전 폰트(web safe font)'의 제약을 벗어나 웹 앱에 커스텀 폰트를 사용할 수 있음을 이해하기.
기본 설정 — @font-face at-규칙과 자주 쓰이는 속성(descriptors)들.
font-family 속성으로 웹 폰트 적용하기.
온라인 서비스를 이용해 웹 폰트를 찾고 코드를 생성하는 방법 (예: Font Squirrel 또는 Google Fonts).

폰트 패밀리 복습 (Font families recap)

기본적인 텍스트와 폰트 스타일링에서 살펴봤듯이, HTML에 적용되는 폰트는 font-family 속성을 사용해 제어할 수 있습니다. 이 속성에는 하나 이상의 폰트 패밀리(글꼴 제품군) 이름들을 적어줄 수 있죠. 웹페이지를 화면에 그릴 때, 브라우저는 사용자의 컴퓨터(시스템)에 설치된 폰트를 찾을 때까지 이 목록을 첫 번째부터 순서대로 쭉 훑어 내려갑니다.

p {
  font-family: "Helvetica", "Trebuchet MS", "Verdana", sans-serif;
}

이 시스템은 꽤 잘 작동하지만, 전통적인 웹 개발 환경에서 폰트 선택권은 아주 제한적이었습니다. 윈도우, 맥, 리눅스 등 모든 흔한 운영체제에 기본적으로 다 깔려있다고 확신할 수 있는 폰트는 손에 꼽을 정도였거든요. 이런 폰트들을 흔히 웹 안전 폰트(Web-safe fonts)라고 부릅니다.
여러분은 폰트 스택(목록)의 맨 앞에 가장 원하는 폰트를 적고, 그다음엔 비슷한 웹 안전 폰트들을 적고, 마지막엔 시스템 기본 폰트(sans-serif 등)를 적어 넣는 방식을 쓸 수 있습니다. 하지만 이 방식은 각각의 폰트가 적용되었을 때 디자인이 깨지지 않고 잘 어울리는지 일일이 테스트해야 하므로 개발자의 업무량만 늘리는 셈이 됩니다.

웹 폰트의 등장 (Web fonts)

이런 제약을 완벽하게 해결해 주는 멋진 대안이 있습니다. CSS를 사용하면 웹(인터넷) 상에 존재하는 폰트 파일을 지정해서, 사용자가 웹사이트에 접속할 때 그 폰트 파일을 같이 다운로드하게 만들 수 있습니다! 즉, 이 CSS 기능을 지원하는 브라우저라면 여러분이 디자인 의도에 맞춰 특별히 선택한 그 폰트 그대로 화면에 표시할 수 있다는 뜻이죠. 정말 놀랍지 않나요? 필요한 문법은 대략 이렇습니다:

가장 먼저, CSS 파일의 맨 위쪽에 폰트 파일을 다운로드할 수 있도록 경로를 지정해 주는 @font-face 규칙 블록(ruleset)을 작성합니다:

@font-face {
  font-family: "myFont";
  src: url("myFont.woff2");
}

이렇게 세팅해 두고 나면, 이제 여러분은 평소처럼 아무 요소에나 @font-face 안에서 지정했던 그 폰트 이름("myFont")을 가져다 쓸 수 있습니다:

html {
  font-family: "myFont", "Bitstream Vera Serif", serif;
}

물론 실제 문법은 이것보다 조금 더 복잡할 수 있습니다. 아래에서 더 자세히 다뤄볼게요.

웹 폰트를 사용할 때 반드시 명심해야 할 몇 가지 중요한 사실들이 있습니다:

폰트는 보통 아무 제약 없이 무료로 쓸 수 있는 것이 아닙니다. 돈을 주고 사야 하거나, 코드나 웹사이트에 폰트 제작자를 명시해야 하는 등의 라이선스 조건을 꼭 따라야 합니다. 정당한 대가나 출처 표기 없이 폰트를 무단 도용해서는 절대 안 됩니다. (특히 상업용 프로젝트에서는 라이선스 확인이 필수입니다!)
모든 모던 브라우저들은 WOFF/WOFF2 (Web Open Font Format 버전 1, 2) 포맷을 지원합니다. 심지어 2011년에 출시된 구시대의 유물 IE9조차도 WOFF 포맷을 지원한답니다.
WOFF2는 가변 폰트(variable fonts), 크로마틱 폰트(chromatic fonts, 컬러 폰트), 폰트 컬렉션 등 트루타입(TrueType)과 오픈타입(OpenType) 스펙의 모든 기능을 완벽하게 지원하는 훌륭한 포맷입니다.
폰트 파일을 나열하는 순서가 아주 중요합니다. 브라우저에게 다운로드할 수 있는 여러 폰트 포맷 목록을 줬을 때, 브라우저는 '자신이 사용할 수 있는 가장 첫 번째' 파일을 덥석 물어갑니다. 그렇기 때문에 가장 최신이자 권장되는 포맷인 WOFF2를 가장 먼저 쓰고, 그 뒤에 구형 포맷들을 나열해야 합니다. WOFF2를 이해하지 못하는 구형 브라우저만 그다음 목록(WOFF 등)으로 넘어가게 되니까요.
아주아주 오래된 레거시 브라우저까지 지원해야 하는 끔찍한(?) 상황이라면 EOT (Embedded Open Type), TTF (TrueType Font), SVG 웹 폰트까지 제공해야 합니다. 이 글에서는 Fontsquirrel Webfont Generator를 사용해 이런 다양한 파일들을 한 번에 만들어내는 방법을 알려드립니다.

💡 강사님의 실무 팁!
"실무에서 TTF, EOT 이런 거 다 넣어야 하나요?"
아니요! 요즘 실무에서는 용량이 가장 작고 압축률이 뛰어난 WOFF2 하나만 쓰거나, 혹시 모를 상황을 대비해 WOFF까지만 추가하는 것이 대세입니다. IE11마저도 지원 종료된 지금, 불필요한 레거시 파일들은 과감히 버리셔도 됩니다.

웹 폰트든 시스템 폰트든, 여러분의 페이지에 적용된 폰트를 자세히 살펴보고 싶다면 Firefox 폰트 에디터(Firefox Font Editor) 같은 개발자 도구를 활용해 보세요.

나만의 웹 폰트 추가해 보기 (Adding your own web fonts)

이런 기초 지식을 바탕으로, 아예 처음부터 기본 웹 폰트 예제를 직접 만들어 볼까요?
web-font-start.html과 web-font-start.css 파일을 다운로드해서 시작 코드로 사용하세요 (라이브 예제 보기). 여러분의 컴퓨터에 새 폴더를 만들고 이 두 파일을 저장해 둡니다. web-font-start.css 파일을 열어보면 기본적인 레이아웃과 텍스트 모양을 잡아주는 최소한의 CSS가 들어있을 겁니다.

폰트 구하기 (Finding fonts)

이번 예제에서는 두 개의 웹 폰트를 사용할 겁니다. 하나는 제목용, 다른 하나는 본문(단락)용입니다. 제일 먼저 할 일은 폰트 파일 자체를 구하는 거겠죠? 폰트는 폰트 제작사(파운드리, foundry)에서 만들며 다양한 파일 포맷으로 제공됩니다. 폰트를 구할 수 있는 곳은 크게 세 종류가 있습니다:

무료 폰트 배포 사이트: 폰트를 무료로 다운로드할 수 있게 해줍니다 (단, 제작자 표기 등의 라이선스 조건은 여전히 있을 수 있습니다). Font Squirrel, DaFont, Everything Fonts 등이 있습니다. 한국어 무료 폰트는 눈누(noonnu)가 아주 유명하죠!
유료 폰트 배포 사이트: 돈을 내고 폰트를 구매하는 곳입니다. fonts.com 이나 myfonts.com이 있고, Linotype, Monotype, Exljbris 같은 파운드리에서 직접 살 수도 있습니다.
온라인 폰트 서비스: 폰트 파일을 굳이 내 서버에 다운받을 필요 없이, 그들의 서버에서 폰트를 저장하고 여러분의 사이트에 바로 서빙해 주는 곳입니다. 적용하기가 아주 편하죠. 자세한 건 아래의 온라인 폰트 서비스 사용하기 섹션에서 다룹니다.

자, 폰트를 찾아볼까요! Font Squirrel에 접속해서 두 개의 폰트를 고릅니다. 하나는 제목에 어울리는 흥미롭고 시선이 가는 폰트(화려한 디스플레이 폰트나 슬랩 세리프 같은 것)를 고르고, 다른 하나는 본문으로 읽기 편한 깔끔한 폰트를 골라보세요. 마음에 드는 폰트를 찾았다면 다운로드 버튼을 눌러 아까 만들어둔 HTML, CSS 파일이 있는 폴더에 저장합니다. 파일 포맷이 TTF든 OTF든 상관없습니다.

다운받은 두 개의 폰트 패키지(보통 폰트 파일과 라이선스 정보가 담긴 ZIP 파일 형태입니다)의 압축을 푸세요. 패키지 안에 폰트 파일이 여러 개 있을 수도 있습니다. 폰트는 보통 굵기나 스타일에 따라 얇은 것(thin), 중간(medium), 굵은 것(bold), 기울임(italic) 등 '패밀리' 형태로 제공되거든요. 이번 예제에서는 복잡하게 생각하지 말고, 각각의 폰트에서 마음에 드는 파일 하나씩만 딱 고르시면 됩니다.

참고:
Font Squirrel 사이트의 오른쪽 단에 있는 "Find fonts" 섹션을 보면, 다양한 태그와 분류(classifications)를 클릭해서 원하는 스타일의 폰트만 필터링해서 볼 수 있답니다.

필요한 코드 생성하기 (Generating the required code)

이제 웹에 쓸 수 있는 최적화된 폰트 포맷(WOFF 등)과 CSS 코드를 자동으로 생성해 볼 차례입니다. 각 폰트에 대해 다음 단계를 따라 해보세요:

만약 상업용이나 실제 웹 프로젝트에 쓰실 거라면, 라이선스 요구사항을 꼼꼼히 확인하고 위반하는 내용이 없는지 꼭 체크하세요!
Transfonter의 Webfont Generator에 접속합니다.
Add fonts 버튼을 눌러 아까 고른 두 개의 폰트 파일(TTF나 OTF 등)을 업로드합니다.
Convert 버튼을 누릅니다.
변환이 완료되면 Download를 누릅니다.

다운로드된 ZIP 파일의 압축을 풀고, 그 내용물들을 여러분의 HTML과 CSS 파일이 있는 폴더로 모두 옮겨 담으세요.

데모에 코드 적용하기 (Implementing the code in your demo)

압축을 푼 폴더 안을 들여다보면 아주 유용한 파일들이 들어있을 겁니다:

각 폰트당 두 개의 변환된 파일: .woff, .woff2 파일.
각 폰트에 대한 데모 HTML 파일 — 브라우저에서 열어보면 해당 폰트가 다양한 텍스트 크기에서 어떻게 보이는지 미리 볼 수 있습니다.
stylesheet.css 파일 — 바로 이 파일 안에 우리가 복사해서 쓸 @font-face 코드가 들어있습니다!

자, 이제 이 폰트들을 우리의 데모 페이지에 실제로 적용해 봅시다:

압축을 푼 폴더 이름을 다루기 쉽게 fonts라는 짧은 이름으로 변경해 주세요.
stylesheet.css 파일을 열고 그 안에 있는 두 개의 @font-face 규칙 덩어리를 복사해서 여러분의 web-font-start.css 파일로 붙여넣습니다. 반드시 파일의 가장 맨 윗줄(다른 어떤 CSS 규칙보다 앞)에 넣어야 합니다. 우리가 폰트를 디자인에 써먹기 전에 브라우저가 먼저 폰트를 다운로드(import)해야 하니까요!
각 url() 함수 안에는 우리가 CSS로 불러올 폰트 파일의 경로가 적혀있습니다. 지금 파일들은 fonts 폴더 안에 들어있으니, 경로가 맞게 연결되도록 파일 이름 앞에 fonts/를 붙여서 경로를 수정해 줍니다.
짜잔! 이제 이 폰트들을 웹 안전 폰트 쓰듯이 font-family 스택에 넣어서 자유롭게 쓸 수 있습니다. 예를 들면 이렇게요:

@font-face {
  font-family: "zantrokeregular";
  src:
    url("fonts/zantroke-webfont.woff2") format("woff2"),
    url("fonts/zantroke-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

h1 {
  font-family: "zantrokeregular", serif;
}

여기까지 잘 따라오셨다면, 정말 멋진 폰트가 적용된 데모 페이지를 보실 수 있을 겁니다. 폰트마다 본연의 디자인 크기나 자간이 다를 수 있으므로, 보기 좋게 만들려면 폰트 크기나 줄 간격 등을 조금씩 손보셔야 할 수도 있어요.

두 개의 제목과 세 개의 단락으로 이루어진 완성된 웹 폰트 예제의 모습. 다양한 폰트와 크기가 적용되어 있습니다.

참고:
혹시라도 잘 안되신다면, 저희가 완성해 둔 파일들과 여러분의 코드를 비교해 보세요 — web-font-finished.html과 web-font-finished.css에서 확인할 수 있습니다. GitHub에서 코드를 다운로드하거나 완성된 예제를 직접 실행해 볼 수도 있습니다.

온라인 폰트 서비스 사용하기 (Using an online font service)

온라인 폰트 서비스들은 폰트 파일들을 자신들의 서버에 저장해 두고 알아서 서빙(제공)해주기 때문에, 여러분이 직접 복잡한 @font-face 코드를 작성할 필요가 전혀 없습니다. 대신, 여러분은 그저 사이트에 HTML 코드 한두 줄만 쓱 끼워 넣으면 마법처럼 모든 게 알아서 작동하죠. Adobe Fonts나 Cloud.typography 같은 서비스들이 대표적입니다. 대부분 유료 구독 서비스지만, 예외적으로 Google Fonts는 완전 무료로 제공되는 아주 훌륭한 녀석이라 실무 프로젝트나 빠른 테스트, 프로토타이핑을 할 때 국민 서비스로 애용됩니다.

대부분의 서비스가 사용법이 아주 쉽습니다. 어떻게 돌아가는지 감을 잡기 위해 구글 폰트(Google Fonts)를 한번 훑어볼게요. 아까 다운받았던 web-font-start.html과 web-font-start.css 원본 파일을 다시 꺼내서 진행해 보세요.

Google Fonts에 접속합니다.
필터나 검색창을 이용해서 마음에 드는 폰트 두 개를 찾아보세요. (한국어 폰트도 많아요! 'Noto Sans KR'이나 'Gowun Dodum' 등을 검색해 보세요.)
폰트 카드를 클릭해서 상세 페이지로 들어갑니다.
마음에 드는 스타일(굵기 등) 옆에 있는 Select this style (또는 + 아이콘) 버튼을 누르면 화면 오른쪽에 선택된 폰트 패널이 열립니다. 다른 폰트도 추가하고 싶다면 뒤로 가서 똑같이 담아주세요.
폰트 쇼핑이 끝났다면, 오른쪽 패널에 제공된 <link> 태그 형태의 코드를 복사합니다.
복사한 <link> 코드들을 여러분의 HTML 문서 안의 <head> 태그 영역에 붙여넣습니다. 이때 기존에 연결해 둔 내 CSS 파일(<link rel="stylesheet" href="...">)보다 더 위쪽에 붙여넣는 것이 좋습니다.
구글 폰트 패널 아래쪽에 보면 복사할 수 있는 font-family CSS 규칙도 친절하게 제공됩니다. 이걸 복사해서 앞서 했던 것처럼 여러분의 CSS 파일에서 원하는 선택자에 적용해 주면 끝!

참고:
제대로 되었는지 확인하고 싶다면 완성된 버전인 google-font.html과 google-font.css를 참고해 보세요 (라이브로 보기).

@font-face 조금 더 깊게 파보기 (@font-face in more detail)

아까 Transfonter가 자동으로 짜준 @font-face 코드를 조금 더 자세히 뜯어볼까요? 대략 이런 식으로 생겼었죠:

@font-face {
  font-family: "zantrokeregular";
  src:
    url("zantroke-webfont.woff2") format("woff2"),
    url("zantroke-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

각각의 줄이 어떤 역할을 하는지 살펴봅시다:

font-family: 이 폰트를 CSS에서 부를 '별명(name)'을 지정하는 곳입니다. 여러분이 나중에 기억하고 쓰기만 편하다면 "mySuperAwesomeFont" 처럼 아무 이름이나 막 지어도 상관없습니다.
src: CSS로 불러올 폰트 파일들의 경로(url 부분)와, 그 파일의 포맷(format 부분)을 지정합니다. 포맷 부분은 필수는 아니지만 꼭 적어주는 게 좋습니다. 브라우저가 파일을 일일이 다운받아 보지 않고도 '아, 내가 쓸 수 있는 포맷이네' 하고 빠르게 판단할 수 있거든요. 쉼표(,)를 이용해 여러 개의 폰트 파일을 나열할 수 있는데, 브라우저는 폭포수(cascade) 규칙에 따라 위에서부터 하나씩 읽어보고 처음으로 자기가 쓸 수 있는 파일을 다운받습니다. 그러니 제일 좋고 압축률이 높은 포맷인 WOFF2를 무조건 맨 앞에 적는 게 최선의 전략입니다.
font-weight / font-style: 이 폰트 파일이 가진 굵기(weight)가 무엇인지, 이탤릭체(italic)인지 아닌지를 명시합니다. 같은 폰트인데 굵기만 다른 폰트 파일 5개를 받았다고 쳐볼까요? 이걸 전부 "font1", "font2" 이렇게 다른 이름으로 부르는 건 멍청한 짓이겠죠. 이때는 5개의 파일 모두 font-family 이름을 똑같이 통일하고, 파일마다 font-weight: 400, font-weight: 700 이런 식으로 정보만 다르게 적어줍니다. 그러면 나중에 CSS에서 그 이름을 쓸 때 font-weight 값만 바꿔주면 브라우저가 알아서 해당하는 파일을 쏙쏙 골라 쓴답니다. (Roger Johansson의 칼럼 CSS를 깔끔하게 유지하기 위해 font-weight와 font-style 정의하기를 보시면 더 자세히 알 수 있어요.)
font-display: 무거운 폰트 파일이 다운로드되는 동안 화면의 글씨를 어떻게 보여줄 것인지를 결정하는 엄청나게 중요한 속성입니다!

💡 강사님의 실무 팁!
font-display: swap;은 프론트엔드 면접 단골 질문이기도 한 'FOUT(웹 폰트 로드 전 기본 폰트가 보이는 현상)' 최적화의 핵심입니다. 이걸 설정해 두면 폰트 다운로드가 끝날 때까지 텍스트가 안 보이고 텅 비어있는(FOIT) 최악의 경험을 막고, 일단 시스템 기본 폰트로 글자를 보여줬다가 다운로드가 끝나면 우리가 원하는 이쁜 폰트로 살짝 바꿔치기(swap)해 준답니다! 실무에선 무조건 넣는다고 보시면 돼요.

참고:
추가로 웹 폰트에 특정 font-variation-settings나 font-stretch 값을 세밀하게 지정할 수도 있습니다. 최신 브라우저에서는 unicode-range라는 아주 쏠쏠한 기능도 제공하는데요. 웹 폰트 파일에서 '특정 범위의 글자들'만 지정하는 기능입니다. 이 기능을 쓰면, 웹 페이지 안에 해당 글자(예: 한글)가 실제로 쓰였을 때만 그 무거운 폰트 파일을 다운로드하게 만들 수 있어서 불필요한 트래픽 낭비를 극적으로 줄여줍니다. Drew McLellan의 Unicode-Range로 커스텀 폰트 스택 만들기를 읽어보시면 기가 막힌 활용법을 얻으실 수 있을 거예요.