Fontsource로 웹폰트 직접 호스팅하기

이번 포스팅에서는 fontsource를 사용하여 웹폰트를 직접 호스팅하는 방법에 대해서 알아보겠습니다.

fontsource

fontsource는 오픈 소스(open source) 웹폰트를 npm 패키지의 형태로 손쉽게 설치하고 직접 호스팅이 가능하게 해주는 라이브러리입니다.

웹폰트를 사용할 때 Google Fonts와 같은 외부 서비스를 통해서 웹폰트를 호스팅하는 경우가 많은데요. 하지만 다양한 웹폰트를 사용하거나 속도가 민감한 서비스의 경우에는 웹폰트를 직접 호스팅하면, 웹폰트 다운로드로 인한 지연을 최소화하여 사용자 경험을 개선할 수 있습니다.

Google Fonts를 통해서 웹폰트를 웹사이트에 적용하는 방법에 대해서는 관련 포스팅을 참고바랍니다.

fontsource는 필요한 웹폰트만 골라서 설치가 가능하도록 @fontsource/로 시작하는 수많은 npm 패키지를 제공하고 있습니다.

예를 들어, 구글에서 만든 한글 고딕체 웹폰트인 Noto Sans KR를 사용하려면 해당 fontsource 패키지를 본인 자바스크립트 프로젝트에 설치합니다.

$ npm i @fontsource/noto-sans-kr

또 다른 예로, 네이버에서 만든 나눔 고딕체를 사용하려면 다음과 같이 설치하면 됩니다.

$ npm i @fontsource/nanum-gothic

웹폰트 선택하기

Fontsource Preview에서 원하는 웹폰트를 검색할 수 있습니다. 언어와 범주로 필터링도 가능하며 모두 오픈소스 웹폰트이기 때문에 저작권 걱정없이 사용할 수 있습니다.

웹폰트 불러오기

원하는 웹폰트에 대한 fontsource 패키지를 설치하면 마치 자바스크립트 패키지를 불러오듯이 import 키워드를 사용하여 웹폰트를 볼러올 수 있습니다.

import "@fontsource/noto-sans-kr";

모든 컴포넌트에서 해당 웹폰트를 사용할 수 있도록 이 import 문은 애플리케이션의 최상위 컴포넌트에서 위치시켜줍니다.

웹폰트를 불러올 때, 글꼴 굵기와 스타일을 명시하지 않으면 font-weight: 400, font-style: normal의 기본 글꼴만 불러옵니다. 그 밖에 굵기와 스타일의 글꼴을 사용하고 싶다면 추가로 불러올 수 있습니다.

예를 들어, Noto Sans KR 웹폰트의 굵기 400과 700을 사용하고 싶다면 다음과 같이 import 문을 사용합니다.

import "@fontsource/noto-sans-kr/400.css";
import "@fontsource/noto-sans-kr/700.css";

웹폰트 사용하기

웹폰트를 사용할 때는 직접 호스팅을 하든 외부 호스팅을 사용하든 동일한 CSS 문법을 사용하므로 특별하게 설명드린 부분은 없습니다.

p {
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 400;
}

h1 {
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 700;
}

font-family와 font-weight를 포함한 CSS에서 텍스트 스타일링에 자주 사용되는 속성에 대해서는 별도 포스팅에 정리해 두었으니 참고 바랍니다.

마치면서

이상으로 fontsource를 사용하여 웹폰트를 직접 호스팅하고 불러와서 사용하는 방법에 대해서 알아보았습니다.