Nuxt3.js에서 scss로 font를 적용하기 (IBM Plex Sans 폰트 적용)

Nuxt3.js에서 scss로 font를 적용하기 (IBM Plex Sans 폰트 적용)

서론

• 최근 노마드 커뮤니티 서비스를 사이드프로젝트를 하면서, 디자이너 분이 선택한 폰트인 IBM Plex Sans 를 웹폰트가 아닌 일반적인 woff 파일을 받아서 처리하는 방식에 대해서 선택하였고, 그걸 작업한 내용을 공유드릴려고 합니다.
• 실제 nuxt.js에서 웹폰트를 쓰는 방법은 Nuxt.js config를 통해 웹폰트를 쉽게 적용해보자.

폰트 다운로드

• 해당 폰트는 https://github.com/IBM/plex/tree/v5.0.0/IBM-Plex-Sans-KR/fonts/complete 해당 주소에서 다운로드 받을수 있습니다.

hinted vs unhinted

• 두가지의 차이를 알기. 위해서 Hinting이라는 개념을 알아야 하는데 폰트의 가독성을 향상 시키기 위해 사용되는 기술로써, 작은 크기에서의 폰트 랜더링을 개선합니다. 각 글자의 아웃라인을 조정하여 픽셀 그리드에 맞추는 과정으로 글자가 . 선명하게 보일수 있습니다.
• 즉, hinted는 hinting을 한 폰트입니다.
• unhinted는 hinting을 하지 않은 폰트로써 디스플레이의 해상도가 높아짐에 따라 hinting의 중요성이 줄어들어서 높은 해상도에서는 글자가 선명하게 보입니다.
• 두개의 차이점은 아래와 같습니다.
  • 파일 크기 : hinting 정보를 저장하기 위해 추가적인 공간이 필요하기 때문에 hinted파일이 크가가 더 큽니다.
  • 랜더링 속도 : hinted는 랜더시 추가적인 계산이 필요함으로 랜더링 속도가 약간 느릴수 있습니다.
  • 디자인 표현 : unhited가 디자이너의 원래 의도를 더 정확하게 반영할수 있습니다.

eot / otf / ttf / woff / woff2

1. EOT (Embeeded OpenType)
   • MS가 개발한 폰트 형식으로 주로 IE에서 사용됩니다. 웹에서 사용할 수 있도록 압축되고, 선택적으로 암호화 됩니다. 이 형식은 오래된 방식이지만, IE 호환성을 유지하려는 경우 사용됩니다.
2. OTF (OpenType Font)
   • Adobe와 MS가 공동개발한 폰트 형식으로 TTF(True Font)를 기반으로 스케일링, 회원, 기울임 등의 변형이 가능하고 여러 언어와 글자를 지원하게 됩니다. PostScript라는 고급 타이포그래피 기능을 지원합니다.
3. TTF (TrueType Font)
   • Apple이 Mac OS 용으로 개발한 폰트 형식으로 OTF와 마찬가지로 스케일링, 회원 기울임 등의 변형이 가능하며, 여러. 언어와 글자를 지원합니다. 대부분 운영체제와 브라우저에서 널리 지원됩니다.
4. WOFF (Web Open Font Format)
   • 웹에서 사용하기 위해 개발된 폰트 형식으로 기본적으로 OTF, TTF를 압축한 형식으로 모든 최신 브라우저에서 지원됩니다. WOFF는 작은 파일 크기와 넓은 호환성 때문에 웹에서 가장 널리 사용되는 폰트 형식 중 하나입니다.
   • 지원 브라우저 체크 : https://caniuse.com/woff
5. WOFF2 (Web Open Font Format2)
   • WOFF 후석 버전으로, 더 효율적인 압축 알고리즘을 사용하여 파일 크기를 줄였습니다. 이 형식은 모든 최신 브라우저에서 지원되며, 가능한 경우 WOFF 대신 WOFF2를 사용하는것이 좋습니다.
   • 지원 브라우저 체크 : https://caniuse.com/woff2

• 각 폰트 형식은 특정 상황 요구사항에 따라 선택됩니다. 일반적으로 웹 개발에서는 가능한 많은 사용자에게 호환성을 제공하면서도 파일 크기를 최소화 하는 것이 좋습니다. 이를 위해 WOFF2, WOFF, TTF 순서로 폰트를 지정합니다.

폰트 다운로드 후 파일 폴더 위치

• 주의) 해당 폴더로 저장하는것이 정답이 아닙니다. 차후 경로 설명을 위해 미리 이야기 드립니다.
• 위에 폰트 포맷을 이야기 드렸듯이, 우리는 WOFF2, WOFF만 설정할 예정입니다.
• 일단 WOFF2, WOFF 를 다운로드 받고, 저는 src/assets/fonts/IBMPlexSans 라는 폴더에 넣어두었습니다.

fonts.scss

• 해당 폰트를 불러오기 위해 css를 사용해야 합니다.
• 아래와 같은 코드로 작성하면 됩니다.

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/IBMPlexSans/IBMPlexSansKR-Thin.woff2') format('woff2'),
  url('../fonts/IBMPlexSans/IBMPlexSansKR-Thin.woff') format('woff');
}

• 여기서 중요한것은 @font-face 입니다. 아래서 살펴보도록 하겠습니다.

@font-face

• 해당 at-rule을 통해 웹페이지의 텍스트에 온라인폰트를 적용할 수 있습니다.
• 관련 문법은 아래와 같습니다.

@font-face {
  font-family: <a-remote-font-name>;
  src: <source> [,<source>]*;
  [font-weight: <weight>];
  [font-style: <style>];
}

• 속성 값
  • font-family: <a-remote-font-name>
    • 폰트 속성에서 폰트명으로 지정될 이름을 설정합니다.
  • src: <source> [,<source>]*
    • 폰트 파일의 위치를 나타내는 URL값을 지정하거나, 사용자 컴퓨터에 설치된 폰트명을 지정하는 속성입니다. 해당 부분에서 , 를 이용해 여러개를 지정한다면 위에서부터 파일을 찾아 존재하지 않으면 다음 값 읽어서 찾는다.
  • [font-weight: <weight>]
    • 폰트의 굵기 값
  • [font-style: <style>];
    • 폰트의 스타일 값

font-weight / font-style을 지정하기.

• 위와 같은 속성들을 설정해 각 타입에 맞는 weight, style을 지정해주면 됩니다.
• 그렇다면 각 관련된 값들은 어디서 볼수 있을까요?
• https://github.com/IBM/plex/blob/master/scripts/data/weights.js
• IBM은 실제 쉽게 적용하기 위해 라이브러리를 제공하고 있는데, 관련된 코드를 살펴보면 이와 같이 있게 됩니다.
• 하나의 data만 살펴본다면,

{
    type: 'Bold',
    properties: {
      fontStyle: 'normal',
      fontWeight: 700,
    },
},

• 위 코드와 같이 Bold 타입인 경우엔 fontWeight가 700인것을 알수 있습니다.
• 위의 주소를 통해 쉽게 어떤 타입이 어떠한 Weight를 갖는지 알수 있습니다.

최종 코드

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/IBMPlexSans/IBMPlexSansKR-Thin.woff2') format('woff2'),
  url('../fonts/IBMPlexSans/IBMPlexSansKR-Thin.woff') format('woff');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/IBMPlexSans/IBMPlexSansKR-ExtraLight.woff2') format('woff2'),
  url('../fonts/IBMPlexSans/IBMPlexSansKR-ExtraLight.woff') format('woff');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/IBMPlexSans/IBMPlexSansKR-Light.woff2') format('woff2'),
  url('../fonts/IBMPlexSans/IBMPlexSansKR-Light.woff') format('woff');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/IBMPlexSans/IBMPlexSansKR-Regular.woff2') format('woff2'),
  url('../fonts/IBMPlexSans/IBMPlexSansKR-Regular.woff') format('woff');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 450;
  src: url('../fonts/IBMPlexSans/IBMPlexSansKR-Text.woff2') format('woff2'),
  url('../fonts/IBMPlexSans/IBMPlexSansKR-Text.woff') format('woff');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/IBMPlexSans/IBMPlexSansKR-Medium.woff2') format('woff2'),
  url('../fonts/IBMPlexSans/IBMPlexSansKR-Medium.woff') format('woff');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/IBMPlexSans/IBMPlexSansKR-SemiBold.woff2') format('woff2'),
  url('../fonts/IBMPlexSans/IBMPlexSansKR-SemiBold.woff') format('woff');
}

@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/IBMPlexSans/IBMPlexSansKR-Bold.woff2') format('woff2'),
  url('../fonts/IBMPlexSans/IBMPlexSansKR-Bold.woff') format('woff');
}

• 따라서 최종적으로 위와 같은 코드가 탄생하였습니다.

nuxt3에서 해당 폰트 scss를 적용하는 법

• (주의) nuxt2와 nuxt3의 적용하는 법이 다릅니다. 현재 저는 nuxt3 기준으로 작성하였으며, nuxt3에서만 아래 코드가 가능하니 참고해주시면 감사하겠습니다.
• https://nuxt.com/docs/getting-started/styling#the-css-property
• css-property옵션을 통해 처리하려고 합니다. 관련해서 nuxt.config.ts 에서 아래와 같이 css 배열에 해당 fonts를 적용한 파일을 지정해주면 전역에 해당 scss파일이 들어가게 됩니다.

export default defineNuxtConfig({
  css: [
    ...
    'assets/styles/fonts.scss',
    ...
  ],
});

결론

• 지금까지 font를 적용해본적은 없었지만, 실제 적용된 사례를 보면, 여러가지의 확장자 / 타입들이 존재했었는데 그와 관련해서 이번에 설정해보면서 하나하나씩의 의미를 알게 된거 같습니다. 또한 src에 여러개의 파일을 설정하는 이유도 이번에 알수 있었습니다.
• 또한 @font-face 에 대해서도 각각 자세하게 알아 볼수 있는 시간이였습니다.
• 마지막으로 Nuxt3에선 손쉽게 설정에 css: []를 통해 전역 css를 설정할 수 있다는 점이 좋다고 생각합니다 🙂