[CSS] 폰트 직접 추가해서 사용하기

Q. 장소, 상황에 구애받지않고 폰트를 적용 시켜 주세요.

 

인터넷이 되지않는곳에서 웹페이지를 로드할때나, 폰트가 설치되지 않았을때 폰트를 다운받아서

원하는 위치에 폴더에 넣어주면 사용이 가능하다.  바로 사용법을 알아보자.

 

별거아닌데 사용할때마다 까먹는다

 

렌더링하는 최상위 html에서 font-face를 사용하여 폰트경로와 이름을 지정해준다.

 

//index.html

body{
    @font-face{
        src: url("/assets/fonts/NotoSansKR-Medium.otf");
        font-family: "Noto";
    }
}

 

최상위 css파일에서 font-face에서 가져온 이름으로 font-famlit를 사용하여 폰트를 적용시켜준다.

//styles.css
//원하는곳에만 사용하고싶을때
styles.css{
	body,input,button,select { margin: 0; font-family: 'Noto', sans-serif; }
}

//전체에 적용하고싶을때
styles.css{
    * {
        box-sizing: border-box;
        letter-spacing: -1px;
        vertical-align: middle;
        font-family: 'Noto';
    }
}