[WP] 나눔고딕을 사용하기 위한 @font-face 설정법

HyungJin

11년 ago

워드프레스로 소개를 하고 있지만 모든 웹사이트에 공통 적용이 되는 내용입니다.

나눔고딕을 사용하기 위해서는 CSS에서 font-family로 참조가 가능해야 합니다. 그러기 위해서는 우선 FTP 업로드 또는 CDN 을 이용해서 폰트 파일을 연결시켜주어야 합니다. 아래 font-face 설정은 그 역할을 합니다. font-family에 사용할 이름과 파일을 참조하여 CSS에서 쉽게 사용 할 수 있도록 도와줍니다.

@font-face{
	font-family:"Nanum Gothic";
	src:url('fonts/NanumGothic.eot');
	src:url('fonts/NanumGothic.eot?#iefix') format('embedded-opentype'),
	url('fonts/NanumGothic.woff') format('woff'),
	url('fonts/NanumGothic.ttf') format('truetype');
	url('fonts/NanumGothic.svg#NanumGothic') format('svg');
	src:local(※), url('fonts/NanumGothic.woff') format('woff');
}

CDN으로 이용할 경우 http://fonts.googleapis.com/earlyaccess/nanumgothic.css 를 참고하시면 됩니다.

워드프레스에 경우에는 주의사항이 있습니다. 바로 워드프레스 업데이트입니다. 워드프레스에서 버전이 릴리즈되었다고 무턱대고 업데이트하시면 기존에 설정했는 CSS 뿐만 아니라 커스터마이징했던 부분이 원점으로 돌아가는 재앙이 발생할 수 있습니다.

기본 중 기본이겠지만 항상 백업을 해두는 습관을 들이시면 재앙을 예방하실 수 있습니다.

Share Content