본문 바로가기
프론트엔드

웹 폰트 적용 방법 (ttf, woff, woff2)

by enlitment 2022. 6. 15.
반응형

웹 폰트 사용 방법에는 다음과 같은 두 가지의 방법이 있다.

 

방법 1. 구글 폰트에서 원하는 폰트의 링크를 따서 css 파일에 걸어준다.

방법 2. 직접 웹 폰트 형식의 파일을 다운받아서 css 파일에 웹 폰트 파일이 있는 폴더 경로를 입력해준다.

 

 

 

* 내가 한 실수들

방법 2

- 웹 폰트 형식으로 변환해주는 사이트는 효과가 없었다.

- 상대경로/절대경로의 개념을 이해하지 못하고 폴더 경로를 제대로 입력해주지 않았다. 

 1  '/'    -> 가장 최상의 디렉토리로 이동한다.(Web root)
   2  './'   -> 파일이 현재 디렉토리를 의미한다.
   3  '../'  -> 상위 디렉토리로 이동한다.

출처: https://88240.tistory.com/122 [shaking blog:티스토리] > 경로 입력 방식 참고할 것.

 

방법 1,2 공통

- css 파일을 js 파일 head에 불러오는 것을 깜빡했다.

 

반응형