CSS 폰트 적용하기 (@font-face)

yonnie·2022년 10월 8일

@font-face
웹폰트를 사이트 내에 적용하기 위한 용도로 사용.
폰트 확장자는 OTF, TTF를 주로 사용하는 것 같고, 파일형식은 OTF - opentype, TTF - truetype이다.

@font-face 기본 사용법

@font-face {
	font-family: "폰트명";
    src:url("파일경로") format("파일형식");
    font-style:normal; /* 선택속성 */
    font-weight:normal; /* 선택속성 */
    }

먼저 폰트명을 정의한 후 해당 폰트의 파일경로와 파일형식을 지정해준다.
이 때, 파일경로에 대문자를 이용할 경우 몇몇 브라우저에서 정상적으로 보여지지 않을 수 있기 때문에 소문자로 지정해주는것이 좋다.

그 이후, 사용하고자 하는곳에

body {
	font-family: "폰트명";
    font-size: 30px; /* 원하는 사이즈로 입력하면 됨 */
    }

적용시켜주면된다.

참 쉽죠?!