본문 바로가기

Blog/Thoughts

구글 웹폰트 안티 얼라이징 문제

많은 티스토리 블로거 분들이 크로스 브라우징의 용이성 때문에 구글 웹폰트를 사용하고 계실 것입니다. 특히 IE9+와 파이어폭스에서는 보안상의 이유로 알 수 없는 게시자나 동일하지 않은 주소에서 호스팅을 하는 woff 폰트 파일은 다운로드 하지 않도록 설정 되어있습니다. 그렇다보니 티스토리의 스킨 폴더에 폰트를 올려놓고 로드를 시켜도 IE나 파이어폭스에서는 정상적으로 로드가 되지 않습니다. 그러나 구글 웹폰트는 정상적으로 로드가 잘 됩니다. 



하지만 여기서 한가지 문제점이 있습니다. 지난 2012년 7월 업데이트 된 크롬 이후 부터는 윈도우에서 외부 woff 렌더링시[각주:1] 안티얼라이징이 지원되지 않고 있습니다. OS X나 리눅스에서 돌리는 크롬에서는 아무 문제가 없으며, 오직 윈도우에서만 발생하고 있는 버그로, 크롬 공식 버그 리포트에도 이미 올라와있습니다. 그러나 많은 시간이 지난 지금까지도 고쳐지지 않고 있는 버그 입니다. 이미 해외에서는 한 차례 포럼을 휩쓸고 나간 사례이며 아직까지도 개선이 안 되다보니 전부다 그냥 자포자기 상태입니다. (...)


직접 폰트 호스팅을 하여 끌어오는 방식을 쓰고 있는 이글루스 블로그직접 폰트 호스팅을 하여 끌어오는 방식을 쓰고 있는 이글루스 블로그


개인이 직접 폰트 호스팅을 할 경우에는 woff 다음에 svg 폰트를 불러오는 방식으로 우회가 가능합니다. 크롬의 svg 렌더링에는 문제가 없으나 현재 woff의 렌더링 시에만 문제가 발생하고 있습니다. 위 사진에서 보시듯 직접 폰트를 끌어오고 있는 이글루스 블로그의 경우에는 크롬에서도 문제 없이 안티 얼라이징이 됩니다. 


개인이 호스팅을 하지 않고 구글 폰트를 끌어다 쓸 경우에는 현재 해결방법이 없습니다. 왜냐하면 구글 웹폰트 서버는 오로지 woff 파일만 지원하기 때문입니다. 아이러니 하게도, 구글이 만든 웹 브라우저인 크롬에서 구글이 서비스하는 구글 웹 폰트가 가장 나쁘게 보입니다. 


-webkit-text-stroke: 0.3px; 이라는 꼼수를 써서 어느정도 안티 얼라이징을 할 수 있지만, 글씨가 두꺼워지며, 흐릿한 그림자가 생깁니다. 게다가 타 운영체제 크롬, 사파리, 오페라에서는 글자가 더 두꺼워지기 때문에 저는 크로미움 개발팀에서 해결을 할 때까지는 그냥 내버려 두려고 합니다. 


그리고 위에 비교 사진에서 보시듯 오페라에서도 동일한 증상이 발생합니다. 이는 최신 오페라 브라우저가 크롬과 동일한 블링크 엔진을 도입하면서 벌어지는 현상으로 추정되고 있습니다. 


모바일 크로미움 같은 경우, 아이폰이나 안드로이드에 들어간 크롬은 아무 문제가 없는 것으로 보아 ‘윈도우 폰트 렌더링 엔진과 크로미움의 폰트 렌더링 엔진이 충돌하지 않나’ 라는 추측을 해봅니다. 공식적인 버그 수정이 되기 전까지는 해결 범위 밖이라서 손 놓고 있을 수 밖에 없고, 모든 브라우저와 운영체제에서 동일한 화면을 띄우는 것이 목표인지라 안타깝습니다.

  1. 시스템 폰트인 경우에는 문제 없이 로드가 됩니다. [본문으로]