구글 폰트 적용시키기

구글 폰트 적용시키기

 

1. 구글 폰트 사이트 접속 

https://fonts.google.com/?subset=korean

 

2. filter에 korean 검색후 원하는 폰트 클릭

 

3. 클릭한 페이지에서 Get Font 클릭 (이미 받은 폰트가 적용했을경우 Remove라 나올텐데 클릭하면 다시 Get Font가 나온다)

4. 다운형식, import형식 택1 

5-1.embed code  (@import 형식)

Style.css

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
body {
    font-family: 'Noto Sans KR', sans-serif; /* 폰트 적용 */
}

하단과 같은 형태로 진행하면 되나 import할때까지 대기시간이 발생하며 페이지가 로딩된 시점에서 어긋나는 느낌을 주기에 별로 추천되지 않는다.

 

5-2. Download 방식

zip을 압축 해제한뒤 ttf파일을 resourecs에 위치시킨뒤 url에 해당 파일위치 지정

참고용 depth

Style.css

@font-face {
    font-family: 'Noto Sans KR';
    src: url('/FONT/NotoSansKR-VariableFont_wght.ttf') format('truetype'); /* TTF 폰트 사용 */
    font-weight: 100 900;
    font-style: normal;
}body {
    font-family: 'Noto Sans KR', sans-serif; /* 폰트 적용 */
}