<div id="readability-page-1" class="page"><div id="entry-view">
      
      <main>
        <div>
            <article id="mainContent">
              <div>
                <p><a href="/m/category/TIL/Nuxt.js"><span>TIL/Nuxt.js</span></a></p><h3>Nuxt3.js에서 scss로 font를 적용하기 (IBM Plex Sans 폰트 적용)</h3>
              </div>
              <p><cite>KimSeYun</cite>
                <span> 2023. 12. 23. 18:13</span>
              </p>
                              <div>
                                <h2>Nuxt3.js에서 scss로 font를 적용하기 (IBM Plex Sans 폰트 적용)</h2>
<h2 data-ke-size="size26">서론</h2>
<ul data-ke-list-type="disc">
<li>최근 노마드 커뮤니티 서비스를 사이드프로젝트를 하면서, 디자이너 분이 선택한 폰트인 IBM Plex Sans 를 웹폰트가 아닌 일반적인 woff 파일을 받아서 처리하는 방식에 대해서 선택하였고, 그걸 작업한 내용을 공유드릴려고 합니다.</li>
<li>실제 nuxt.js에서 웹폰트를 쓰는 방법은 <b><a href="https://rutgo-letsgo.tistory.com/360">Nuxt.js config를 통해 웹폰트를 쉽게 적용해보자.</a></b></li>
</ul>
<h2 data-ke-size="size26">폰트 다운로드</h2>
<ul data-ke-list-type="disc">
<li>해당 폰트는 <a href="https://github.com/IBM/plex/tree/v5.0.0/IBM-Plex-Sans-KR/fonts/complete">https://github.com/IBM/plex/tree/v5.0.0/IBM-Plex-Sans-KR/fonts/complete</a> 해당 주소에서 다운로드 받을수 있습니다.</li>
</ul>
<h3 data-ke-size="size23">hinted vs unhinted</h3>
<ul data-ke-list-type="disc">
<li>두가지의 차이를 알기. 위해서 Hinting이라는 개념을 알아야 하는데 폰트의 가독성을 향상 시키기 위해 사용되는 기술로써, 작은 크기에서의 폰트 랜더링을 개선합니다. 각 글자의 아웃라인을 조정하여 픽셀 그리드에 맞추는 과정으로 글자가 . 선명하게 보일수 있습니다.</li>
<li>즉, hinted는 hinting을 한 폰트입니다.</li>
<li>unhinted는 hinting을 하지 않은 폰트로써 디스플레이의 해상도가 높아짐에 따라 hinting의 중요성이 줄어들어서 높은 해상도에서는 글자가 선명하게 보입니다.</li>
<li>두개의 차이점은 아래와 같습니다.
<ul data-ke-list-type="disc">
<li>파일 크기 : hinting 정보를 저장하기 위해 추가적인 공간이 필요하기 때문에 hinted파일이 크가가 더 큽니다.</li>
<li>랜더링 속도 : hinted는 랜더시 추가적인 계산이 필요함으로 랜더링 속도가 약간 느릴수 있습니다.</li>
<li>디자인 표현 : unhited가 디자이너의 원래 의도를 더 정확하게 반영할수 있습니다.</li>
</ul>
</li>
</ul>
<h3 data-ke-size="size23">eot / otf / ttf / woff / woff2</h3>
<ol data-ke-list-type="decimal">
<li>EOT (Embeeded OpenType)
<ul data-ke-list-type="disc">
<li>MS가 개발한 폰트 형식으로 주로 IE에서 사용됩니다. 웹에서 사용할 수 있도록 압축되고, 선택적으로 암호화 됩니다. 이 형식은 오래된 방식이지만, IE 호환성을 유지하려는 경우 사용됩니다.</li>
</ul>
</li>
<li>OTF (OpenType Font)
<ul data-ke-list-type="disc">
<li>Adobe와 MS가 공동개발한 폰트 형식으로 TTF(True Font)를 기반으로 스케일링, 회원, 기울임 등의 변형이 가능하고 여러 언어와 글자를 지원하게 됩니다. PostScript라는 고급 타이포그래피 기능을 지원합니다.</li>
</ul>
</li>
<li>TTF (TrueType Font)
<ul data-ke-list-type="disc">
<li>Apple이 Mac OS 용으로 개발한 폰트 형식으로 OTF와 마찬가지로 스케일링, 회원 기울임 등의 변형이 가능하며, 여러. 언어와 글자를 지원합니다. 대부분 운영체제와 브라우저에서 널리 지원됩니다.</li>
</ul>
</li>
<li>WOFF (Web Open Font Format)
<ul data-ke-list-type="disc">
<li>웹에서 사용하기 위해 개발된 폰트 형식으로 기본적으로 OTF, TTF를 압축한 형식으로 모든 최신 브라우저에서 지원됩니다. WOFF는 작은 파일 크기와 넓은 호환성 때문에 웹에서 가장 널리 사용되는 폰트 형식 중 하나입니다.</li>
<li>지원 브라우저 체크 : <a href="https://caniuse.com/woff">https://caniuse.com/woff</a></li>
</ul>
</li>
<li>WOFF2 (Web Open Font Format2)
<ul data-ke-list-type="disc">
<li>WOFF 후석 버전으로, 더 효율적인 압축 알고리즘을 사용하여 파일 크기를 줄였습니다. 이 형식은 모든 최신 브라우저에서 지원되며, 가능한 경우 WOFF 대신 WOFF2를 사용하는것이 좋습니다.</li>
<li>지원 브라우저 체크 : <a href="https://caniuse.com/woff2">https://caniuse.com/woff2</a></li>
</ul>
</li>
</ol>
<ul data-ke-list-type="disc">
<li>각 폰트 형식은 특정 상황 요구사항에 따라 선택됩니다. 일반적으로 웹 개발에서는 가능한 많은 사용자에게 호환성을 제공하면서도 파일 크기를 최소화 하는 것이 좋습니다. 이를 위해 WOFF2, WOFF, TTF 순서로 폰트를 지정합니다.</li>
</ul>
<h3 data-ke-size="size23">폰트 다운로드 후 파일 폴더 위치</h3>
<ul data-ke-list-type="disc">
<li><b>주의) 해당 폴더로 저장하는것이 정답이 아닙니다. 차후 경로 설명을 위해 미리 이야기 드립니다.</b></li>
<li>위에 폰트 포맷을 이야기 드렸듯이, 우리는 WOFF2, WOFF만 설정할 예정입니다.</li>
<li>일단 WOFF2, WOFF 를 다운로드 받고, 저는 src/assets/fonts/IBMPlexSans 라는 폴더에 넣어두었습니다.</li>
</ul>
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="836" data-origin-height="972">
    <span data-url="https://blog.kakaocdn.net/dn/cwvqvj/btsCwSyqGYb/rLTIcCV3hfkt7DzjrKLs51/img.png" data-lightbox="lightbox">
        <img src="https://blog.kakaocdn.net/dn/cwvqvj/btsCwSyqGYb/rLTIcCV3hfkt7DzjrKLs51/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" data-origin-width="836" data-origin-height="972">
    </span>
    
</figure>
<h2 data-ke-size="size26">fonts.scss</h2>
<ul data-ke-list-type="disc">
<li>해당 폰트를 불러오기 위해 css를 사용해야 합니다.</li>
<li>아래와 같은 코드로 작성하면 됩니다.</li>
</ul>
<pre><code>@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');
}
</code></pre>
<ul data-ke-list-type="disc">
<li>여기서 중요한것은 @font-face 입니다. 아래서 살펴보도록 하겠습니다.</li>
</ul>
<h3 data-ke-size="size23"><a href="https://developer.mozilla.org/ko/docs/Web/CSS/@font-face">@font-face</a></h3>
<ul data-ke-list-type="disc">
<li>해당 at-rule을 통해 웹페이지의 텍스트에 온라인폰트를 적용할 수 있습니다.</li>
<li>관련 문법은 아래와 같습니다.</li>
</ul>
<pre><code>@font-face {
  font-family: &lt;a-remote-font-name&gt;;
  src: &lt;source&gt; [,&lt;source&gt;]*;
  [font-weight: &lt;weight&gt;];
  [font-style: &lt;style&gt;];
}
</code></pre>
<ul data-ke-list-type="disc">
<li>속성 값
<ul data-ke-list-type="disc">
<li>font-family: &lt;a-remote-font-name&gt;
<ul data-ke-list-type="disc">
<li>폰트 속성에서 폰트명으로 지정될 이름을 설정합니다.</li>
</ul>
</li>
<li>src: &lt;source&gt; [,&lt;source&gt;]*
<ul data-ke-list-type="disc">
<li>폰트 파일의 위치를 나타내는 URL값을 지정하거나, 사용자 컴퓨터에 설치된 폰트명을 지정하는 속성입니다. 해당 부분에서 , 를 이용해 여러개를 지정한다면 위에서부터 파일을 찾아 존재하지 않으면 다음 값 읽어서 찾는다.</li>
</ul>
</li>
<li>[font-weight: &lt;weight&gt;]
<ul data-ke-list-type="disc">
<li>폰트의 굵기 값</li>
</ul>
</li>
<li>[font-style: &lt;style&gt;];
<ul data-ke-list-type="disc">
<li>폰트의 스타일 값</li>
</ul>
</li>
</ul>
</li>
</ul>
<h3 data-ke-size="size23">font-weight / font-style을 지정하기.</h3>
<ul data-ke-list-type="disc">
<li>위와 같은 속성들을 설정해 각 타입에 맞는 weight, style을 지정해주면 됩니다.</li>
<li>그렇다면 각 관련된 값들은 어디서 볼수 있을까요?</li>
<li><a href="https://github.com/IBM/plex/blob/master/scripts/data/weights.js">https://github.com/IBM/plex/blob/master/scripts/data/weights.js</a></li>
<li>IBM은 실제 쉽게 적용하기 위해 라이브러리를 제공하고 있는데, 관련된 코드를 살펴보면 이와 같이 있게 됩니다.</li>
<li>하나의 data만 살펴본다면,</li>
</ul>
<pre><code>{
    type: 'Bold',
    properties: {
      fontStyle: 'normal',
      fontWeight: 700,
    },
},
</code></pre>
<ul data-ke-list-type="disc">
<li>위 코드와 같이 Bold 타입인 경우엔 fontWeight가 700인것을 알수 있습니다.</li>
<li>위의 주소를 통해 쉽게 어떤 타입이 어떠한 Weight를 갖는지 알수 있습니다.</li>
</ul>
<h3 data-ke-size="size23">최종 코드</h3>
<pre><code>@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');
}
</code></pre>
<ul data-ke-list-type="disc">
<li>따라서 최종적으로 위와 같은 코드가 탄생하였습니다.</li>
</ul>
<h2 data-ke-size="size26">nuxt3에서 해당 폰트 scss를 적용하는 법</h2>
<ul data-ke-list-type="disc">
<li><b>(주의) nuxt2와 nuxt3의 적용하는 법이 다릅니다. 현재 저는 nuxt3 기준으로 작성하였으며, nuxt3에서만 아래 코드가 가능하니 참고해주시면 감사하겠습니다.</b></li>
<li><a href="https://nuxt.com/docs/getting-started/styling#the-css-property">https://nuxt.com/docs/getting-started/styling#the-css-property</a></li>
<li>css-property옵션을 통해 처리하려고 합니다. 관련해서 nuxt.config.ts 에서 아래와 같이 css 배열에 해당 fonts를 적용한 파일을 지정해주면 전역에 해당 scss파일이 들어가게 됩니다.</li>
</ul>
<pre><code>export default defineNuxtConfig({
  css: [
    ...
    'assets/styles/fonts.scss',
    ...
  ],
});
</code></pre>
<h2 data-ke-size="size26">결론</h2>
<ul data-ke-list-type="disc">
<li>지금까지 font를 적용해본적은 없었지만, 실제 적용된 사례를 보면, 여러가지의 확장자 / 타입들이 존재했었는데 그와 관련해서 이번에 설정해보면서 하나하나씩의 의미를 알게 된거 같습니다. 또한 src에 여러개의 파일을 설정하는 이유도 이번에 알수 있었습니다.</li>
<li>또한 @font-face 에 대해서도 각각 자세하게 알아 볼수 있는 시간이였습니다.</li>
<li>마지막으로 Nuxt3에선 손쉽게 설정에 css: []를 통해 전역 css를 설정할 수 있다는 점이 좋다고 생각합니다 🙂</li>
</ul>
            
            
                </div>
            



<ins data-ad-client="ca-pub-9527582522912841" data-ad-slot="3250933968" data-ad-format="auto" data-full-width-responsive="true" data-ad-type="inventory" data-ad-adfit-unit="DAN-VHBugUKpJ1qm98uW"></ins>



                          
            
            </article>
            
              
            
            
            
            
              
            
            
            
            
              
              
            
          </div>
      </main>
    </div></div>

Enthusiastically, Steady, Slowly

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

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

댓글