[CSS] CSS에 폰트 적용하기 (Feat. ttf 폰트 파일)

기능이 거의 완료되어서, 이제 디자인을 입혀보고자 한다!

홈페이지 분위기가 확 달라져 보일 수 있는 중요한 요소 중 하나는 바로 폰트다.

 

나는 ttf파일 폰트 파일을 이용하여 CSS에 적용해보았다.

먼저, css폴더 안에 사용할 폰트 파일을 넣어준다.

 

@font-face {
	src: url(./fonts/LG_Smart_UI-Regular.ttf);
	font-family: "LG_Smart_UI-Regular";
}

body {
  font-family: "LG_Smart_UI-Regular"; 
}

그리고 적용할 페이지 부분에서 @font-face에 경로를 정확하게 지정해주고,

사용할 영역에 지정해준다.

 

만약, 현재 페이지의 전체 영역에 적용을 원한다면 css 전체 선택자를 사용해주면 된다.

* {
  font-family: "LG_Smart_UI-Regular"; 
}

 

 

결과)

 

[참조] https://velog.io/@jehjong/CSS%EC%97%90-%ED%8F%B0%ED%8A%B8-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0-%EC%9B%B9%ED%8F%B0%ED%8A%B8-%ED%8F%B0%ED%8A%B8-%ED%8C%8C%EC%9D%BC