[CSS] 폰트 적용하기

CSS 폰트 (글꼴) 적용하기

아름다운 웹사이트를 위해서 기본 폰트가 아닌 사용자 지정 폰트가 필요할 때가 있다.

보통 프로젝트에서 폰트 설정은 가장 처음에 진행하는데,

장기간 프로젝트를 하다보면 다음 프로젝트를 진행할 때 폰트 추가 방법을 까먹기 쉽다.

 

CSS의 @font-face를 사용하면 웹페이지에 온라인 폰트나 폰트 파일을 적용할 수 있다.

폰트 문법은 다음과 같다.

@font-face {
  font-family: <a-remote-font-name>;
  src: <source> [,<source>]*;
  [font-weight: <weight>];
  [font-style: <style>];
}

 

1. font-family : 필수, 폰트명으로 사용할 이름을 지정해준다.

2. src : 필수, 폰트 파일의 위치를 나타내는 Url을 url() 괄호 안에입력한다.

대체 폰트가 있다면 쉼표 뒤에 추가로 입력할 수 있다.

사용자의 로컬 환경에 설치된 폰트는 local() 구문을 사용해 지정할 수 있다.

3. font-weight : 폰트의 굵기를 설정한다.

4. font-style : 폰트의 스타일을 설정한다.

 

<사용예시>

@font-face {
  font-family: Outfit;
  src: url('assets/fonts/outfit/Outfit-VariableFont_wght.ttf');
  font-weight: 200;
}

@font-face {
  font-family: YoungSerif;
  src: url('assets/fonts/young-serif/YoungSerif-Regular.ttf');
}

 

<폰트 적용 전후>

심심했던 웹디자인이 폰트만 변경해도 전보다 전문적으로 보인다.