Web font

Notice

Recent Posts

Recent Comments

Link

« 2026/07 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

無제

Web font 본문

<style>

Web font

yo-u-loo 2026. 3. 16. 14:01

🟢 Web font

사용자의 컴퓨터에 설치되어 있지 않아도 웹사이트에서 다운로드되어 표시되는 글꼴.

기본적으로 웹은 사용자의 컴퓨터에 있는 폰트만 사용할 수 있다.
하지만 웹 폰트를 사용하면 어떤 기기에서도 동일한 디자인의 글꼴을 보여줄 수 있다.

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

1️⃣ 외부 서비스 이용 (CDN - Google Fonts, Adobe Fonts 등)

폰트 서비스를 제공하는 사이트에서 링크를 가져와 사용하는 방법.

사용이 매우 쉬움.
서버에 폰트 업로드 필요 없음.
인터넷 연결 필요.

<head>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">

<style>
   body {
       font-family: 'MyCustomFont', sans-serif;
   }

<link>: HTML 파일의 <head> 부분에 넣을 때 사용. (성능 상 가장 유리해 권장하는 방법)

<style>
    @import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');

@import: CSS 파일(.css) 내부에 직접 넣고 싶을 때 사용.

2️⃣ 서버에 직접 업로드 (@font-face)

웹 서버에 폰트 파일을 업로드하여 사용하는 방법.

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/myfont.woff2') format('woff2');
}

body {
  font-family: 'MyCustomFont', sans-serif;
}

외부 서비스 의존 없음.
로딩 제어 가능.
서버에 폰트 파일 관리 필요.

🔹 웹 폰트 파일 형식

웹에서 자주 사용하는 폰트 파일 형식.

WOFF (Web Open Font Format): 웹에서 사용하기 위해 만들어진 표준 웹 폰트 형식.
- 기존 폰트(TTF, OTF)를 압축한 형식, 파일 크기가 작음, 모든 브라우저 지원.

WOFF2: WOFF의 개선 버전으로 최신 웹 폰트 형식. (아직 표준화 X)
- 웹 성능 최적화, 가장 높은 압축률, 페이지 로딩 속도 개선, 최신 브라우저 지원.

TTF / OTF: 일반 폰트 형식.
EOT: 옛날 Internet Explorer 전용 폰트 형식.

✂️ 성능 최적화 TIP ✂️

subset (서브셋): 일부 문자만 사용한다면 불필요한 문자는 제거. (영어 사이트 → 한글 제거, 숫자만 필요한 경우 → 숫자만 포함)
font-display: 폰트 로딩 중 텍스트가 보이지 않는 문제(FOIT)를 해결한다. (font-display: swap)
- swap: 먼저 기본 폰트 표시 후 웹 폰트 적용. (주로 사용)
- block: 폰트 로딩 전 텍스트 숨김.
- fallback: 짧게 기다린 후 기본 폰트 사용.

🌟 2026년 현재 트렌디하고 실무 활용도가 높은 웹폰트 🌟

🇰🇷 한글 폰트

한글 UI 디자인의 핵심은 가독성과 다양한 두께.

폰트명	용도	특징	사용 분야
Noto Sans KR	가장 많이 쓰는 기본 한글 웹폰트	깔끔한 Sans-serif, 가독성 좋음, 다양한 굵기 제공	웹사이트 본문, UI 디자인, 블로그
Pretendard	최근 개발자 + 디자이너 사이에서 가장 인기	Inter 기반 한글 폰트, UI/UX 최적화, 매우 깔끔한 디자인	SaaS, 스타트업, 서비스 웹사이트
Spoqa Han Sans Neo	기업 사이트에서 많이 사용	안정적인 가독성, 균형 잡힌 디자인	기업 홈페이지, 서비스 페이지
Nanum Gothic	오랫동안 사용된 무료 한글 폰트	네이버 제작, 안정적인 가독성	블로그, 일반 웹사이트
SUIT	최근 UI 디자인에서 인기	현대적인 스타일, 다양한 weight	스타트업, 앱 UI

🇺🇸 영문 폰트

영문 UI 디자인의 핵심은 기하학적 구조와 화면 해상도 대응력.

폰트명	용도	특징	사용 분야
Inter	현재 UI 디자인 표준 폰트	UI 최적화, Variable font, 매우 높은 가독성	SaaS, 웹앱, 대시보드
Poppins	스타트업 디자인에서 인기	둥근 형태, 젊고 현대적인 느낌	랜딩페이지, 브랜드 사이트
Montserrat	헤드라인용으로 많이 사용	강한 인상, 제목 디자인에 좋음	브랜드 디자인, 마케팅 페이지
DM Sans	깔끔한 UI 폰트	미니멀 디자인, 읽기 편함	앱, 스타트업 웹사이트
Playfair Display	Serif 스타일	고급스러운 느낌, 패션 / 매거진 스타일	브랜드, 블로그

'<style>' 카테고리의 다른 글

text style 속성 (0)	2026.03.17
color 속성 (0)	2026.03.17
font 속성 (0)	2026.03.13
우선순위(Precedence)와 상속(Inheritance) (0)	2026.03.13
Selectors (선택자) 타입 (0)	2026.03.13

'<style>' Related Articles

無제

Web font 본문

Web font

🟢 Web font

'<style>' 카테고리의 다른 글

티스토리툴바