[CSS] 폰트 적용

폰트 파일을 다운로드 받은 후, 프로젝트 폴더 내 원하는 경로에 넣어준다.

fonts/

CSS 코드에서 경로를 통해 폰트파일을 불러와 적용한다.

 

 

폰트 파일 확장자

폰트 파일은 다양한 확장자를 가지며, 확장자 별로 지원하는 브라우저가 다르다.

ttf : format('truetype')

otf : format('opentype')

woff : format('woff')

svg : format('svg')

eot : format('embedded-opentype')

 

 

 

@font-face

CSS 명령어를 사용해 웹 브라우저에게 해당 서체를 다운로드 할 것을 알린다.

@font-face {
  font-family:"friends"; /* 사용하고 싶은 font-family */
  src: url("fonts/GABRWFFR.TTF") format("truetype");
}

 

폰트를 적용하고자 하는 태그에 CSS 코드를 작성해주면 폰트 적용이 된다.

* {
  font-family:"friends";
}