[팀 프로젝트 (제시요)] CSS에 폰트(ttf파일) 적용 방법, ttf파일과 샘플 모음

CSS에 폰트 적용하는 방법

• resources - static - fonts 디렉토리 생성

• 폰트 ttf 파일 저장 ⇒ 이 경우 BMDOHYEON.ttf 파일 사용

• CSS파일 혹은 mustache파일의 <style>태그 안에 @font-face 어노테이션 활용한 코드 작성

• body의 기본 폰트로 설정해놓으면 요소마다 따로 폰트 지정할 것 없이 전체 적용됨

@font-face {
    font-family: 'contentFont'; /* 폰트 이름 지정 */
    src: url('/fonts/BMDOHYEON.ttf') format('truetype'); /* 경로와 파일 형식 */
}

body {
    font-family: 'contentFont', Arial, sans-serif; /* 기본 폰트로 설정 */
}

• 특정 요소에만 폰트 적용하는 것도 가능

• 단, @font-face 어노테이션 활용 코드 중 body의 기본 폰트로 설정해놓는 부분은 지워야함

• 이 경우 메인 화면의 제목만 폰트 적용함

// @font-face 어노테이션 코드 중 body의 기본 폰트 설정 부분 생략
@font-face {
    font-family: 'contentFont'; /* 폰트 이름 지정 */
    src: url('/fonts/BMDOHYEON.ttf') format('truetype'); /* 경로와 파일 형식 */
}


// 특정 요소에 폰트 적용
.t1-title h1 {
    font-family: 'contentFont', serif;
}

• 경로를 맞게 작성했는데도 빨간 줄로 오류 표시가 뜨면 일단 실행해서 브라우저에 폰트가 적용됐는지부터 확인

• 브라우저의 관리자 모드에서 font에 대해 응답 코드 200이라고 확인이 되면 코드에 빨간 줄이 있어도 정상적으로 폰트 적용된 것

ttf 파일과 샘플 (메인에 폰트 적용)

[도현체]

[레코체]

[주아체(배달의민족)]

[한나체(배달의민족)]

[지마켓산스체(지마켓)]

[어그로체]

[설립체유건욱체]

[머니그라피체(토스)]