나눔고딕 웹폰트 무료 호스팅 해주는 곳

블로그를 꾸미다보면 폰트도 자유자제로 바꾸고 싶은 욕심이 들것이다. 폰트도 저작권이 있어서 아무거나 넣기도 힘들다. 네이버에서 나눔서체를 무료로 배포 하고 있기때문에 나눔고딕을 폰트로 쓰면 좋은데, 초보자들에게는 쉽지 않다.

보통 브라우저별로 웹폰트 확장자가 다르기 때문에 브라우저별로 폰트 파일로 만들어서 업로드 한다음 CSS에서 폰트 로드되게 해야 한다. 하지만 이런 나눔고딕 폰트를 무료로 호스팅 해주는 Mobilis가 있기에 아래와 같이 쉽게 구현 할 수 있다.  직접 폰트파일을 업로드 하지 않아도 된다.

그리고 Font-Face 라는 곳을 추천한다. 이곳에도 쉽게 사용할 수 있도록 코드뿐만 아니라, 호스팅도 지원한다.

웹폰트는 사파리는 ttf, 크롬이나 파이어폭스는 woff라는 확장자를 가진다. 아래 코드는 IE를 제외한 브라우저는 무료로호스팅 하는 곳에서 웹폰트파일을 받아오고, IE는 직접 업로드 해서 불러온 것이다.

CSS의 가장 윗부분에 붙여넣으면 적용 된다.

/* 사파리 */
@font-face { 
	font-family:'NanumGothicWeb'; 
	font-style:normal; 
	font-weight:400; 
	src: url('http://api.mobilis.co.kr/webfonts/Nanum/NanumGothicCompact.ttf') format('truetype');
}

/* 크롬, 파이어폭스 */
@font-face { 
	font-family:'NanumGothicWeb'; 
	font-style:normal; 
	font-weight:400; 
	src: url('http://webfonts-cdn.mobilis.co.kr/webfonts/Nanum/NanumGothicCompact.woff') format('woff');
}

/* IE */
@font-face {
	font-family:나눔고딕, 
	MalgunGothic; 
	src:local('나눔고딕'), url(./images/NanumGothic.eot) format('truetype');
};



@charset "utf-8";

*{
        font-family: 'NanumGothicWeb', 나눔고딕;
}

body {
        font-family: 'NanumGothic', 나눔고딕;
}

div {
        font-family: 'NanumGothic', 나눔고딕;
}