CSS) font-face 사용하기

웹폰트란?

-웹 서버에 원하는 폰트를 요청해서 사용자에게 보여주는 방식

 @font-face 명령어로  웹 브라우저에게 서체 이름과 다운받을 위치를 알려준다.

 

@font-face의 기본 문법

@font-face {
    font-family: 내맘대로 사용하여 폰트 이름지정;
    src: url(폰트를 가져오는 url);
    font-weight: 폰트의 굵기 값;
    font-style: 폰트의 스타일 값;
}

 

활용 예제

@font-face {
    font-family: 'Cafe24Oneprettynight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Oneprettynight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {
    font-family: 'Cafe24Oneprettynight';
}