[CSS] CSS 폰트파일 적용법

1. @font-face

무료 웹 에디터인 summernote 를 사용하면서 클라이언트의 요구사항으로 기본제공하는 폰트 이외의 한글폰트를 적용해야 했다.

Summernote - Super Simple WYSIWYG editor

요청한 폰트 중에는 구글 웹 폰트에서 참조할 수 없는 폰트목록도 있어서 서체파일을 패키지경로에 집어넣어

사용자의 컴퓨터에서 해당 경로의 폰트파일을 다운로드받아 사용할 수 있도록 CSS파일을 수정했다.

/**
 * ttf -> truetype
 * otf -> opentype
 * woff -> woff
 * eot -> embedded-opentype
 */
@font-face {
	font-family: "NanumBarunGothic";
	src: url("./font/NanumBarunGothic.woff") format("woff"), 
		url("./font/NanumBarunGothic.ttf") format("truetype"),
		url("./font/NanumBarunGothic.svg#NanumBarunGothic") format("svg");
	font-style: normal;
	font-weight: normal;
}

퍼블리셔 없이 직접 CSS를 본격적으로 수정해야했던 프로젝트는 처음이었기에 서체파일을 구하는 것 부터 시행착오가 많았는데,

웹 사이트 중 ttf 파일을 여러 타입의 폰트파일로 변환할 수 있는 사이트가 있었다. 크롬 확장프로그램으로도 제공된다.

TTF WOFF 변환 (온라인 무료) — Convertio

구글링을 해서 font-face 문법을 적용하는데도 시행착오가 많아, 별의별 방법을 적용하는냐고 ttf를 사용하였지만

실제로 거의 모든 web explorer에서 otf, woff 파일만으로 호환이 되며, ttf는 모든 서체파일이 포함된 포맷이기 때문에 용량이 커서

패키지 용량이 줄여야하는 프로젝트의 경우 otf, woff 파일만 사용하는 것이 좋겠다.

2. font-family

font-face로 적용한 폰트를 html 태그 내에서 사용할 땐 style 요소 중 font-family 에 폰트이름을 명시한다.

이 때 style 요소에서는 font-family와 달리 여러 폰트이름을 지정할 수 있으며, 실제 사용환경에서 다양한 상황에 대응하기 위해

원래 목표했던 폰트를 제외하고도 기본제공되는 폰트를 명시하는 것이 좋다.

div {
	font-family: NanumGothic, "돋움", "굴림"
}