Web font

**웹 폰트(Web Font)**란 사용자의 컴퓨터에 해당 서체 파일이 설치되어 있지 않아도, 웹 브라우저가 서버에서 폰트 파일을 자동으로 다운로드하여 화면에 보여주는 기술을 말합니다.

쉽게 말해, 디자이너가 의도한 예쁜 글꼴을 전 세계 모든 사용자에게 동일하게 보여주기 위한 '온라인 대여 폰트'라고 생각하면 쉽습니다.

---

1. 웹 폰트가 필요한 이유

과거에는 사용자의 PC에 설치된 폰트(기본 서체: 굴림, 돋움, Arial 등)만 웹사이트에서 보여줄 수 있었습니다.

• 일관성 결여: 내 컴퓨터에서는 예쁜 '나눔고딕'으로 보이지만, 그 폰트가 없는 친구 컴퓨터에서는 투박한 '기본 서체'로 깨져 보이는 문제가 있었습니다.
• 디자인의 제약: 특별한 서체를 쓰려면 글자를 아예 '이미지'로 만들어서 넣어야 했는데, 이는 수정이 어렵고 검색 엔진이 글자를 읽지 못한다는 단점이 있었습니다.

웹 폰트를 사용하면 이런 문제 없이 어떤 환경에서든 똑같은 디자인을 유지할 수 있습니다.

---

2. 웹 폰트 사용 방법 (두 가지 핵심 방식)

① 외부 서비스 이용 (Google Fonts 등)

가장 쉽고 많이 쓰이는 방법입니다. 구글 폰트 같은 서비스에서 제공하는 코드 한 줄만 복사해서 붙여넣으면 됩니다.

HTML

 

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

② 서버에 직접 업로드 (@font-face)

폰트 파일을 직접 내 서버에 올리고 CSS로 연결하는 방식입니다.

CSS

 

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

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

---

3. 웹 폰트 파일 형식 리스트

브라우저마다 지원하는 폰트 형식이 다르기 때문에 용도에 맞게 선택해야 합니다.

• WOFF2 / WOFF: 웹을 위해 태어난 형식입니다. 압축률이 매우 좋아 현재 가장 권장되는 표준 포맷입니다.
• OTF / TTF: 일반적인 설치용 폰트입니다. 용량이 커서 웹에서 그대로 쓰기엔 부담스러울 수 있습니다.
• EOT: 과거의 인터넷 익스플로러(IE)를 위한 형식이지만, 현재는 거의 사용하지 않습니다.

---

💡 실무자의 시선: 성능 최적화 팁

웹 폰트는 편리하지만, 너무 많이 사용하면 사이트 로딩 속도가 느려집니다.

• 폰트 다이어트 (Subset): 한글 폰트는 글자 수가 많아 용량이 매우 큽니다. 자주 쓰는 글자(가, 나, 다 등)만 추린 '서브셋 폰트'를 사용해 용량을 줄이는 것이 실무의 핵심입니다.
• font-display 속성: 폰트가 다운로드되는 동안 글자가 안 보이는 현상을 방지하기 위해 font-display: swap; 옵션을 사용하여, 로딩 전까지는 기본 서체로 먼저 내용을 보여주는 것이 좋습니다.
• 우선순위 설정 (Fallback): font-family: '주서체', '보조서체', sans-serif; 순서로 작성하여, 첫 번째 폰트가 실패하더라도 차선책을 준비해 두어야 합니다.

---

웹 폰트 덕분에 이제 웹사이트는 잡지처럼 화려하고 개성 있는 타이포그래피를 가질 수 있게 되었습니다.

---