03. Vanilla-extract-css를 활용하여 공통 Fonts 설정

7주라는 긴 시간동안 진행했던 웹 게임 프로젝트 NoColored도 이제 마무리가 되었다. 프로젝트를 진행하면서 내가 알게 되었던 것, 알아야 할 것 등을 기록해 놓았으니, 이 기록들을 포스팅 할 것.

내가 처음으로 시도했던 것은 Vanilla를 사용하여 전역에 Font를 적용하는 것이었다. 긴 말 필요없이 바로 설명부터 하면 될 듯.

import { globalFontFace } from '@vanilla-extract/css';

// 글꼴 이름을 정확한 이름으로 변경
export const textFont = 'DNFBitBitv2';
export const numFont = 'PixelAEBold';
export const loadingTextFont = 'DOSPilgiMedium';
export const loadingNumFont = 'Chonkly';

// 웹에서 호스팅되는 글꼴에 대한 정의
globalFontFace(textFont, {
  src: 'url("//cdn.df.nexon.com/img/common/font/DNFBitBitv2.otf") format("opentype")',
});

globalFontFace(loadingTextFont, {
  src: 'url("//cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/DOSPilgiMedium.woff2") format("woff2")',
});

// 로컬에 저장된 글꼴에 대한 정의 (public 폴더 내의 경로 반영)
globalFontFace(numFont, {
  src: 'url("/fonts/PixelAE-Bold.ttf") format("truetype")',
});

globalFontFace(loadingNumFont, {
  src: 'url("/fonts/Chonkly.otf") format("opentype")',
});

먼저 이전 ProG의 프로젝트에서는 대부분의 작업을 한 페이지 안에서 작업했기 때문에 export를 잘 사용하지 않았다. export를 함으로써 이제 우리는 다른 프로젝트에서 이 const를 사용할 수 있게 되었다.

기존의 웹에서 호스팅되는 글꼴은 url을 입력하면 되지만, 중요한 점은 웹 호스팅이 지원되지 않는 글꼴은 로컬, 그것도 public 파일에 저장해놓는 것이 유용하다. 추가로 formatType에 따라 format을 다르게 설정해야할 수도 있으니 이것도 참고.

이렇게 적용된 폰트는, 공통 컴포넌트를 만들기 위해 필요한 요소들을 사전에 정의해놓는 vars.css.ts를 통해서 정리함으로 또한 사용이 가능하다.