티스토리 뷰


안녕하세요.

오늘은 구글 폰트 대해서 이야기 할려고 합니다 ^^


http://www.google.com/fonts/

구글 웹폰트 중에서 한글을 지원하는 폰트를 소개 합니다.

 

홈페이지 HTML에 구글 폰트 넣기 (나눔 고딕) - 무료

 

2010년 부터 스마트 기기 시대가 본격적으로 되면서 부터  인터넷을 PC로만 하던 시대에서 이젠 스마트폰으로 많이 하고 있습니다.

특히, 아이패드, 갤럭시탭 과 같은 스마트PC도 많이 사용하고 있습니다.


웹개발을 하다보면은 HTML 소스에 폰트를 보통 윈도우에 있는 폰트를 많이 지정해서 사용합니다.

가장 많이 사용하는것이 "맑은 고딕" 인데요~

(기존에는 돋움, 굴림 폰트를 많이 사용했었죠~)

"맑은 고딕" 폰트를 사용하게 될 경우 스마트폰, 아이패드와 같은 스마트기기에서는 "맑은 고딕"이 안나옵니다.

스마트 기기에 "맑은 고딕" 폰트가 없기때문입니다.

("맑은 고딕" 폰트는 윈도우에 내장되어있는 폰트 입니다.)

윈도우 PC에서만 "맑은 고딕"이 나온다는 말이죠..

아시는 분은 대부분 다 아실 것이라고 생각이 됩니다.


그래서 홈페이지제작시 HTML에 웹폰트를 많이 사용하는데요... 일반 폰트를 웹폰트로 변경해서 사용을 할 수 도 있지만~

저작된 문제때문에 함부로 폰트를 사용할 수 없습니다.

(이쁜 폰트는 대부분 유료 폰트라고 보시면 되십니다.)


홈페이지 제작을할때 가장 많이 사용하는 웹폰트는 "구글 폰트"가 아닐까요?

실제로 많이 사용하고 있습니다.

특히, 구글폰트에는 한글을 지원하는 "나눔 고딕" 폰트가 있습니다.


사용해 보면은 깔끔하고 이쁩니다.


 

 

 

 

 

위 그림은 구글 나눔고딕 폰트를 적용시 캡쳐한 화면 입니다.

 


홈페이지 HTML 소스에서 실제로 사용시에는 아래와 같이 사용하시면 되십니다.

 


<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr">
<title></title>

<style type="text/css">
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css); /* 'Nanum Gothic' */
#font {font-family:Nanum Gothic; font-size:13pt; color:555555; line-height:2;}
</style>

</head>

<body>


<div id="font">
안녕하세요. <br />
만나서 반갑습니다.<br />
5it 입니다.<br />
오늘도 좋은 하루 되세요~<br />
감사합니다.<br />

</div>


</body>

</html>


이쁜 폰트 많이 사용하세요~


감사합니다.