웹 폰트

글꼴 관련 문서
{{{#!wiki style="margin:0 -10px -5px; min-height:calc(1.5em + 5px)" {{{#!folding [ 펼치기 · 접기 ] {{{#!wiki style="margin:-5px -1px -11px; word-break:keep-all"	손글씨
서예 · 캘리그래피 · 필기체 · 서명 · 필기 · 필적
필기도구 · 문방사우
분류
한글	바탕 · 돋움
라틴 문자	Vox-ATypI 분류 · 세리프 · 산세리프 · 이탤릭 · 블랙 레터
한자	관련 틀 참조
인쇄 / 디자인
활자( 금속활자) · 합자 · 타이포그래피
포스트스크립트 · OTF · TTF · 웹 폰트 · 클리어타입 · 가변 글꼴
목록
글꼴 목록 · 상업용 목록 · 분류:글꼴
기타/관련 항목
속기 · 문자 체계 · 문장 부호 · 전각과 반각 · 볼드

}}}}}}}}} ||

1. 개요2. 특징

2.1. 장점2.2. 단점

3. 웹 폰트 제공 서비스4. 웹 폰트 대안

1. 개요

웹 폰트는 서체 파일을 서버에 탑재해 클라이언트로 보내주는 방식의 기술이다.

웹 폰트로 사용되는 파일 형식으로는 EOT, WOFF, WOFF2 등이 있다.

2. 특징

2.1. 장점

해당 서체가 설치되지 않은 기기에서도 해당 서체를 볼 수 있다. 컴퓨터에 기본적으로 설치되어 있는 글꼴인 웹 안전 폰트(web safe font)만으로 웹페이지를 구성한 것에 비하면 웹 디자이너들에게는 정말 달가운 발전이 아닐 수 없다. 특히 모바일에서 큰 장점으로 작용하는데, 같은 제조사라도 폰 기종마다 탑재된 서체가 다르기 때문에 웹 쪽에서 서체를 적용하기 어려웠던 문제가 단번에 해결된다.

2.2. 단점

트래픽이 많이 증가한다. 그나마 영문 웹폰트는 수십 KB 정도의 수준이나 한글 웹폰트는 수백 KB ~ 2천 여 KB 수준으로 용량이 크다. 따라서 해당 폰트를 사용하기 전에 정말 그 폰트가 필요한지 고민해보는 게 좋을 것이다. 특히 모바일에서 큰 단점으로 작용하는데, 무제한 요금제가 아니면 용량은 금액과 직결되므로 욕먹기 딱 좋은 상황이 벌어진다.

요즘에는 인터넷 속도가 그래도 많이 나아졌지만 그래도 여전히 사용자의 환경에 따라 속도는 많이 느려질 수 있다. 2021년 기준으로도 열악한 통신환경이 제공되는데, 가령 무제한 데이터 요금제의 400kbps QoS 환경이 있다.[1] 웹폰트 로딩 전까지 기본 시스템 글꼴을 로딩하다가 로딩이 완료되면 해당 웹폰트로 바뀌는 FOUT(Flash of Unstyled Text) 현상이나, 글이 아예 안 보이다가 웹폰트 로딩후 글이 나타나는 FOIT(Flash of Invisible Text) 현상 등이 생기기도 한다.

용량문제와 이로 발생하는 사용자불편(화면 깜박임, 일부 텍스트만 보여지는 문제등)를 최소화하기 위해서 여러 기술들이 표준으로 도입되고 있다. subset, unicode-range, font-display등이 있다. 이를 사용하여 극단적으로 폰트를 쥐어짜면, 사용자 불편은 해소할 수 있다.

저작권 문제도 있기도 하다. 웹상에 올려서 배포해야만 하는데, 폰트 구입에서 사용권만 얻을뿐, 배포권을 주지 않는 경우가 부지기수이기 때문. 비영리적 사용이라면 인터넷 사용도 허가하는 폰트를 사용하는게 좋다. 이를 해결하기 위해 나온 확장자가 WOFF이며, 구글 폰트 같은 서비스를 사용하면 저작권 문제는 걱정하지 않아도 된다.

3. 웹 폰트 제공 서비스

눈누: 상업적 무료 이용이 가능한 한글 글꼴을 모아놓은 사이트이다. 단 이 사이트는 글꼴 정보만 제공하므로 웹폰트 변환을 하기 전에 해당 글꼴이 수정 및 재배포가 가능한 라이선스인지 꼭 확인해야 한다. 이걸 불허한다면 웹폰트로 만들 수 없다.
구글 폰트: 대표적인 웹폰트 서비스이다. 한글 글꼴도 있긴 하지만 수는 적은 편이다. 가변 글꼴를 지원한다.
어도비 타입킷: 유료 웹폰트도 제공한다.
산돌구름 웹폰트 한국의 대표적인 폰트 서비스인 산돌구름에서도 2024년 8월 유료 웹폰트 서비스를 출시했다. 산돌의 다양한 히트 폰트들을 웹폰트로 사용할 수 있으며, 다이나믹 서브셋 방식으로 비교적 빠른 속도로 로딩된다.

4. 웹 폰트 대안

타이틀, 소제목 등에 개성있는 폰트를 사용하고 싶은 경우, 이미지를 사용하는 경우가 많다. GIF, PNG-8, SVG 형식의 이미지를 주로 사용한다. 일반적인 이미지 파일이라면 JPG의 용량이 작고 효율적인 경향이 있지만, 이는 사진에 주로 맞는 이야기이다. 같은 색이 많이 반복되는 단순한 그래픽이나 글씨를 대체하는 용도에 특히 저해상도(작은 크기)의 이미지는 무손실 압축 포맷의 이미지를 사용하는 것이 이미지가 선명도가 좋아 읽기 좋은 것은 물론 용량도 더 작다.

다만 이러한 텍스트 이미지를 사용하는 방식은 접근성 면에서 좋지 않다. 특히 이러한 경향은 우리나라 사이트에서 많이 보이는데, 일반적인 사용자에게는 보기에 문제가 없을지 몰라도, 스크린 리더를 사용하는 시각장애인들이나 브라우저의 번역 기능을 사용하는 외국인들은 해당 글자를 읽기 힘들다는 문제가 있다. 전자의 경우 대체 텍스트를 사용하는 방법이 있지만, 여전히 후자는 해결하지 못한다. 따라서 로고와 같은 특별한 경우가 아니라면 웬만하면 텍스트는 텍스트로 표시하는게 훨씬 좋다.

GIF - 오래된 포맷이므로 호환성이 좋다. 다만 최근 브라우저들은 대부분 PNG 정도는 기본으로 지원하기 때문에, 움짤이 아니고서야 굳이 호환성면으로나 용량면으로나 GIF보다는 PNG를 쓰는 것을 선호하는게 보통이다.
PNG - 일반 버전인 PNG-24와, 256색 인덱스 된 PNG-8의 두 종류가 있으며, 사람들은 PNG가 용량이 크다 싶을 경우에 PNG-8을 찾는 경향이 있다. PNG-24를 PNG-8로 변환할 때 색상을 인덱싱 해주는 프로그램의 성능에 따라 PNG-8 화질이 떨어질(망가질) 수도 있다. 가령 투명 알파채널에서 계단현상이 생긴다던가 하는 문제가 대표적이다.
SVG - 벡터그래픽이므로 확대축소에 강하다. 글꼴 정도의 단순한 그래픽의 경우 용량 감소가 극대화된다. 나름 최신 포맷이라 브라우저에서 호환성이 떨어지던 시절도 있었지만, 2023년 기준으로 웬만한 최신 브라우저라면 다 지원해서 현재는 호환성 문제는 없다. SVG 사용하는 이유, 방법

[1] 페이지 하나 띄우는데 5~8초까지 걸릴 수 있다.