구글 폰트 다운받아 로컬 호스팅 하기

우리가 웹 사이트를 구축하고 퍼블리싱 하는 과정에서 가장 처음 맞딱트리는 존재가 폰트에 관한것이다.

예전 웹사이트야 폰트는 디폴트만 써도 충분했으나 웹 디자인의 대한 수요가 점차 늘어가자 다양한 폰트를 쓰기위해 폰트를 웹 호스팅에 넣어두고 사용자가 다운받아 쓸 수 있게 했으며, 무엇보다도 모든사용자에게 똑같은 경험을 시키기위해 지정된 폰트로 웹 사이트를 랜더링 할 수 있게 하기위한 초기화 개념의 폰트도 이제 많이 사용하고있다.

하지만 영어권과 다르게 한글의 경우에는 수많은 글자에 대해서 폰트 디자인을 지원해야하고 그러다보니 상대적으로 큰 폰트파일 때문에 초기 로딩속도가 많이 지연되는 문제도 발생했다.

이후에 서브셋 폰트를 사용해 자주 사용하는 글자만 추출한 한글 폰트를 사용하던지, 아니면 폰트를 지연 로딩시켜 CDN경로나 구글 폰트처럼 웹 폰트를 로딩하는 방식으로 우회하도록 발전해왔다.

여기서 대부분의 웹사이트에서 채용하고있는 구글 웹 폰트에 대해서 언급하고자한다.

사실 이건 구글폰트만의 문제는 아닐것이다.

요즘같은 빠른 인터넷 시대에서는 사용자에게 웹사이트를 얼마나 빠르게 띄워 쾌적한 사용자 경험을 제공하는지가 대두되기 시작했고, 그러다보니 웹사이트 초기로딩이 매우 중요한 부분으로 자리잡는데, 특히 이때 외부 사이트(CDN, Google Fonts)등의 리소스를 끌어오는 웹페이지를 구현했다면 그 사이트의 접속 속도에 따라서 내 사이트의 로딩속도도 지연되기 마련이다.

이런 부분을 우회하기위해서는 예전처럼 폰트파일도 자체 호스팅으로 지원하는게 이상적인데, 이런 폰트 파일을 쉽게 추출하고 관리하는거 조차도 여간 문제가 아니다.

여기서 소개할만한 방법이 Google Web Fonts Helper 사이트를 이용한 구글 웹폰트 추출 및 적용방법이다.

해당 사이트는 현재 구글 폰트에 게시된 모든 폰트파일에 접근이 가능하며, 언어셋, 필요한 굵기등을 선택해 로컬 호스팅이 가능하게 파일을 다운로드하며, CSS에서 font-face 설정의 가이드라인까지 지원해주는 훌륭한 사이트다.

그럼 하나씩 직접 적용해보자.

우선 적용할 폰트파일을 좌상단 검색 박스에서 검색한다.

그러면 해당 폰트 파일만 리스트에서 재 필터링이 되서 보이는데 이를 클릭하면 우측에 해당 폰트파일에 대한 작업이 가능한 영역이 뜬다.

순서대로 어느 언어셋을 사용할지, 어느 굵기를 사용할지 아래와 같이 클릭 한다.

그러면 그 아래에 내가 선택한 옵션에 맞는 font-face 스타일 선언문이 쭉 나열된다.

해당 CSS에는 적용방법이 총 3가지로 지원되는데, 순서대로

- 모던 브라우저(최신 브라우저만)

- 레거시 서포트(IE를 포함한 구형 브라우저)

- 히스토릭 서포트(구형 브라우저 및 모든 디바이스를 위한 명시적 나열)

옵션을 선택해 선언문을 구현할 수 있다.

대부분의 경우에는 레거시 서포트정도만 해줘도 크게 문제는 없다.

이후 스크롤을 내리면 아래에 "Customize folder prefix (optional)" 이 있는데 이는 font-face의 src 경로의 접두사를 재지정하는 역할을 한다.

내가 여러개의 폰트를 관리한다면 기존값인 "../fonts/"로는 모든걸 관리하면 너무 관리가안되므로 이 부분은 아래 다운로드된 폰트의 폴더명으로 확장해주는것이 좋다.

일단 정확한 폴더명을 알아내야하므로 이부분은 잠시 스킵하고 아래 Download Files 항목에서 버튼을 통해 폰트파일을 다운로드 받아보자.

그럼 위와 같은 폴더로 폰트파일이 다운로드되는데 이 폴더명을 바탕으로 자신의 프로젝트의 폰트파일 위치와 함께 위의 프리픽스 경로를 재지정해준다.

나같은 경우는 "루트 -> /fonts/폰트명/폰트파일들" 이렇게 관리할꺼라서 나는 /fonts/ibm-plex-sans-kr-v10-korean_latin/  이걸로 정의해주었다.

이후에 새로 src가 적용되어 font-face가 보일꺼고 그걸 복사, 붙여넣기로 자신의 css 코드에 붙여넣으면 웹폰트를 로컬호스팅으로 적용할 수 있다.

폰트파일을 직접호스팅에서 지원한다는것은 결국 자체 호스팅 트래픽이 좀더 나갈수 있다는거긴 하지만, 타 사이트의 연결로인한 리소스 지연도 방지할 수 있고, 또 구글 폰트라는 웹 게시용 공식 폰트를 쉽게 헬퍼를 통해 사용할 수 있다는것이 그래도 꽤나 괜찮은 방법이라고 생각한다.