[CSS] @font-face와 google fonts 사용 방법

* 공부한 내용을 다시 기억하고 정리하기 위해 쓰는 글입니다.

* 부족한 내용이나 틀린 내용을 알려주시면 감사합니다.

---

 

 

@font-face 사용하는 방법 (단, 폰트 파일 갖고 있어야 함)

@font-face {
    font-family: '폰트명_지어주면_됨R';
    font-weight: 400;
    src: url(폰트_디렉토리_경로);
}

@font-face {
    font-family: '폰트명_지어주면_됨B';
    font-weight: 800;
    src: url(폰트_디렉토리_경로);
}

body {
    font-family: '폰트명_지어주면_됨R';
}

근데 위와 같은 경우는 폰트 파일을 내가 갖고있어야 함.

그리고 한글 폰트는 용량이 커서 1~2개만 사용해야 함.

(용량 줄이려면 ttf 대신 woff 쓰면 됨)

 

 

google font 폰트 파일 호스팅 (폰트 파일 없어도 됨)

 

1. google fonts 사이트에서 원하는 폰트 고른다.
   
   
2. HTML에 첨부하는 경우
   →  <link>로 시작되는 부분을 복붙
   
   
3. CSS에 첨부하는 경우
   →  @import 로 시작되는 부분을 CSS 파일의 맨 위에 복붙

 

구글이 호스팅해주는 폰트가 미리 정의된 CSS 파일을 가져다 쓰는 것이기 때문에

내 사이트의 트래픽 절약과 로딩 시간 단축의 장점이 있고

크롬브라우저는 이미 방문한 사이트는 캐싱해주기 때문에

많은 사람들이 이용할 수록 더 빠르게 폰트를 이용할 수 있다.

 

 

 

 

📚 참고 자료

✔ 코딩애플