Angular font 적용하는 방법 예시

agnusdei1207 2023. 6. 28. 17:30

SMALL

https://noonnu.cc/

눈누

상업용 무료한글폰트 사이트

noonnu.cc

1. 위 사이트에 접속하여 무료 폰트를 고릅니다.

2. 웹폰트로 사용 부분 코드를 복사합니다.

3. 앵귤러 프로젝트 내 theme 폴더에 font.scss 파일을 생성

@font-face {
  font-family: "SEBANG_Gothic_Bold";
  src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2104@1.0/SEBANG_Gothic_Bold.woff")
    format("woff");
  font-weight: normal;
  font-style: normal;
}

.SEBANG_Gothic_Bold {
  font-family: "SEBANG_Gothic_Bold";
}

4. 복사한 내용을 붙이고 추가로 class 설정!

5. global.scss 내부에 방금 전에 생성한 font 파일을 로드

<div class="flex gap-5">
      <div
        *ngFor="let number of miniNumbers"
        class="text-sm text-gray-400 hover:text-white hover:font-bold trasition-all cursor-pointer SEBANG_Gothic_Bold"
      >
        {{number}}
      </div>
    </div>

6. html 태그 내에 클래스로 사용하면 적용 완료!

LIST