CSS 웹폰트 — @font-face 로컬 폰트 완전 정리

 

 

Web Development · CSS Webfont

CSS @font-face —
로컬 웹폰트 사용하기 완전 정리

서버에 폰트 파일을 두고 사이트에서 직접 불러오기

@font-face { font-family: 'trana'; src: local('trana'), url('trana.eot'), url('trana.woff') format('woff'), url('trana.ttf') format('truetype'); } .w-font { font-family: 'trana', sans-serif; }

---

1 @font-face — 폰트 등록 규칙

@font-face는 "이 폰트 파일을 이 이름으로 사용한다"고 등록하는 CSS 규칙. 등록한 후 다른 셀렉터에서 font-family로 호출.

속성	역할
font-family	폰트의 별칭 (이후 호출용 이름)
src: local()	사용자 PC에 같은 폰트 있으면 사용 (다운로드 절약)
src: url()	서버에서 다운로드
format()	파일 형식 힌트 (브라우저 호환)

---

반응형

2 폰트 파일 형식

확장자	지원	특징
woff2	모던 표준	가장 작은 용량, 최우선 권장
woff	모든 브라우저	전통적인 웹폰트 표준
ttf / otf	구형 호환	용량 큼
eot	옛 IE 전용	현재 거의 불필요

※ 2026년 기준 woff2 + woff만 있으면 충분. 옛날엔 5종 다 필요했지만 현재는 단순화.

---

3 사용 흐름

1) 폰트 파일을 서버에 업로드 → 2) @font-face로 등록 → 3) font-family로 호출. 반드시 fallback 폰트를 두 번째에 명시 (사용자 브라우저에서 못 불러올 때 대비).

font-family: 'trana', sans-serif; → trana가 안 되면 시스템 sans-serif

---

핵심 한 줄 요약

@font-face웹폰트 등록 규칙

src: local()사용자 PC 우선 — 다운로드 절약

src: url()서버 다운로드

woff2 + woff현재 표준 2종

fallback두 번째에 sans-serif 등 필수

Tags

#@font-face #font-family #src #local #url #woff #ttf #CSS #HTML #웹폰트 #로컬폰트 #웹개발 #티스토리

▼ 티스토리 태그 입력란 복사용

@font-face, font-family, src, local, url, woff, ttf, CSS, HTML, 웹폰트, 로컬폰트, 웹개발, 티스토리