[CSS] 배포 사이트에 다운로드 폰트 적용하기

기본적으로 CSS에서 제공하는 폰트가 마음에 들지 않거나 내 프로젝트에 어울리지 않는 경우 간단하게 다운로드한 폰트를 프로젝트에 적용해볼  수 있다.

 

1. 폰트 다운로드

우선 마음에 드는 폰트를 다운받는다.

https://fonts.cafe24.com/

카페24 상업용 무료 폰트 다운로드 - 카페24

무료 폰트 사이트는 찾아보면 많이 있으니 참고하면 좋다.

 

 

2. 프로젝트에 파일 복사

위와 같이 다운로드한 폰트를 작업중인 프로젝트에 넣어준다.

필자는 styles/fonts/**.ttf 와 같이 저장해줬다.

 

3. CSS 설정

@font-face{} 를 이용해 불러올 폰트를 설정해준다.

/* global.css */

@font-face {
  font-family: maplestory;
  src: url("./fonts/Maplestory\ Light.ttf");
}
@font-face {
  font-family: maplestoryBold;
  src: url("./fonts/Maplestory\ Bold.ttf");
}

 

4. CSS 사용

평소에 폰트를 사용하는것처럼 CSS를 적용해주면 된다.

body {
  font-family: maplestory;
}