웹 폰트

웹 폰트

웹 폰트는 웹 페이지에서 텍스트를 표시하기 위해 사용되는 글꼴로, 사용자의 컴퓨터에 사전에 설치되어 있지 않더라도 웹 서버에서 직접 다운로드하여 적용할 수 있다. 일반적으로 CSS의 @font-face 규칙을 이용해 선언하며, 폰트 파일 형식으로는 TrueType(Font)(.ttf), OpenType(.otf), Web Open Font Format(.woff, .woff2), Embedded OpenType(.eot) 등이 사용된다.

주요 특징

1. 크로스‑브라우저 호환

   • 현대 브라우저는 @font-face와 주요 폰트 포맷을 지원한다. 다만 구형 Internet Explorer에서는 eot 포맷이 필요할 수 있다.

2. 성능 고려

   • 폰트 파일은 용량이 크기 때문에 캐싱, 서브셋팅(필요한 글리프만 포함), 압축(woff2) 등을 통한 최적화가 권장된다.

3. 라이선스

   • 웹용 폰트는 서비스 제공자의 이용 약관에 따라 사용이 제한될 수 있다. Google Fonts, Adobe Fonts 등은 무료 혹은 구독 기반으로 웹 사용을 허용한다.

4. 접근성

   • 웹 폰트를 사용하면 텍스트가 이미지가 아닌 실제 문자 데이터로 제공되어 스크린 리더 등 보조 기술과 호환된다.

적용 예시 (CSS)

@font-face {
    font-family: 'Noto Sans KR';
    src: url('https://fonts.gstatic.com/s/notosanskr/v27/-F6xfjptAgt5VM-kVkq9kxshmIcol3s.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}
body {
    font-family: 'Noto Sans KR', sans-serif;
}

참고 표준

• CSS Fonts Module Level 3 – W3C 표준으로 @font-face 구문 및 폰트 로딩 메커니즘을 정의한다.
• WOFF/WOFF2 – 웹 전용 폰트 압축 포맷으로, W3C가 표준화하였다.

활용 맥락

• 브랜드 일관성: 기업 고유의 서체를 웹에 적용하고자 할 때.
• 다국어 지원: 다양한 언어·스크립트를 포함하는 폰트를 제공함으로써 국제화가 용이해진다.
• 디자인 자유도: 시스템 기본 폰트에 제한되지 않고 디자이너가 의도한 타이포그래피를 구현할 수 있다.

이상은 웹 폰트에 관한 객관적인 기술적 설명이다.