[CSS] 다운받은 웹폰트 적용하기

❗️ 준비물: 폰트 파일(.woff)

 

📍 나는 Neo둥근모 홈페이지를 통해 .woff 확장자인 웹폰트를 다운 받았다.

https://neodgm.dalgona.dev/

Neo둥근모 프로젝트

 

📍 만일 가지고 있는 폰트 확장자가 .woff 가 아니라면 변환 후 이용해야한다. 아래 사이트를 통해서 변환 하시길.

https://convertio.co/kr/ttf-woff/

TTF WOFF 변환 (온라인 무료) — Convertio

 

📍 프로젝트 폴더에 폰트 파일을 넣고 CSS에 아래와 같이 입력한다.

@font-face {
  font-family: '폰트이름';
  src: url('폰트경로') format('woff');
}

나는 Neo둥근모를 써서 아래와 같이 입력했다. 예시로 보세유~

@font-face {
  font-family: 'neodgm';
  src: url('./font/neodgm.woff') format('woff');
}

위와 같이 쓰고 똑같이 font-family에 이름 쓰면 끝 ㅋ

body {
  font-family: neodgm;
}