외부에서 폰트 가져오기

직접 폰트 ttf파일을 외부에서 다운받아 폰트를 프로젝트에서 사용하는 방법을 적어보려고 한다.

1. 폰트 다운로드

원하는 폰트를 찾아 ttf 파일을 다운로드 해준다. 나는 'Corleone' 라는 폰트를 사용하려고 한다.

2. ttf 파일 프로젝트에 추가

다운로한 ttf 파일을 프로젝트 폴더 안에 복사한다.

3. CSS에 @font-face 적용

이제 CSS 파일에서 @font-face 규칙을 사용해 폰트를 추가해준다. 예시 코드는 아래와 같다.

@font-face {
  src: url("Corleone.ttf");
  font-family: Corleone;
}

@font-face 의 src 속성에 ttf 파일 경로를 넣는다. font-family 속성은 이 폰트를 사용할 때 참조할 이름이다. 이렇게 이름을 정해준 뒤에 쓰고 싶은 곳에 font-family: 정해준 이름을 적어주면 된다. 예를 들어,

h1 {
  font-family: Corleone;
}