[TIL] @font-face 사설 폰트 설정하기

기본 font-family에 없는 폰트는 다운 받은 후에 적용시켜줘야한다.

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

<a-remote-font-name> : font 속성에서 폰트명(font face)으로 지정될 이름을 설정한다.</a-remote-font-name>
<source> : 원격 폰트(remote font) 파일의 위치를 나타내는 URL 값을 지정하거나, 사용자 컴퓨터에 설치된 폰트명을 local("Font Name")형식으로 지정하는 속성이다.
<weight> : 폰트의 굵기(font weight) 값.</weight>
<style> : 폰트 스타일(font style) 값.

// 실제 적용 

@font-face {
  font-family: "Kaiti"; // 폰트명 설정
  src: url("../fonts/simkai.woff") format("woff"); 
  font-weight: normal;
  font-style: normal;
}

if(lang === "cn") {
    let temp = document.querySelectorAll('[ml-blahblah]');
    temp.forEach((el) => {
      el.setAttribute('style', 'font-family: Kaiti !important'); 
    })
  }

멀티랭귀지로 언어에 따라 폰트를 다르게 표시하기 위해 중국어는 Kaiti라는 서체를 주도록 구성하였다.

출처

https://webclub.tistory.com/261