작성일자
카테고리 CSS/CSS기초

그동안 나눔 고딕 웹폰트를 사용하는 방법을 두가지 알아봤습니다. 이번에는 구글 웹폰트 사이트에 링크해서 나눔체의 여러가지 폰트를 사용하는 방법을 알아봅니다. 아래 링크로 이동해서 아래로 스크롤 하면 중간 쯤에 나눔체를 사용하는 방법이 나옵니다. 처음에 나눔 붓체의 링크가 있습니다.


http://www.google.com/webfonts/earlyaccess


나눔 붓체

Nanum Brush Script (Korean)

The Nanum fonts (Korean : 나눔글꼴) are unicode fonts designed especially for the Korean-language script, designed 

by Sandoll Communications (Korean : 산돌 커뮤니케이션) and Fontrix (Korean : 폰트릭스). The publisher is Naver. 

Nanum Brush Script is a contemporary brush script with a warm touch and is expertly hinted for screen use.

Link

@import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);

Example

font-family: 'Nanum Brush Script', cursive;
SIL Open Font License, 1.1 | Download


위 링크는 스타일시트에 삽입해서 사용하는 방법입니다. 즉 스타일시트 상단에 웹폰트 링크를 입력하고 그 다음부터 웹폰트를 사용하고자 하는 곳에 스타일시트를 선언해 주면 됩니다.


<head> 태그에 시용할 경우는 다음과 같이 하면 됩니다.


<link href='http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css' rel='stylesheet' type='text/css' />


위와같이 <head>...</head> 태그 사이에 삽입하고 다음과 같이 스타일시트에 선언합니다.


body {

font-size: 14px;

font-size: 1rem;

font-family: 'Nanum Brush Script', Helvetica, Arial, sans-serif;

text-rendering: optimizeLegibility;

color: #444;

}

위의 예는 나눔 붓체의 경우이고 다른 폰트는 이름을 다르게 하면 됩니다.


Nanum Gothic (Korean)

The Nanum fonts (Korean : 나눔글꼴) are unicode fonts designed especially for the Korean-language script, designed 

by Sandoll Communications (Korean : 산돌 커뮤니케이션) and Fontrix (Korean : 폰트릭스). The publisher is Naver. 

Nanum Gothic is a contemporary sans-serif with a warm touch and is expertly hinted for screen use.

Link

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

Example

font-family: 'Nanum Gothic', sans-serif;
SIL Open Font License, 1.1 | Download


Nanum Gothic Coding (Korean)

The Nanum fonts (Korean : 나눔글꼴) are unicode fonts designed especially for the Korean-language script, designed 

by Sandoll Communications (Korean : 산돌 커뮤니케이션) and Fontrix (Korean : 폰트릭스). The publisher is Naver. 

Nanum Gothic Coding is a contemporary monospaced sans-serif with a warm touch and is expertly hinted for 

screen use.

Link

@import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);

Example

font-family: 'Nanum Gothic Coding', monospace;
SIL Open Font License, 1.1 | Download


Nanum Myeongjo (Korean)

The Nanum fonts (Korean : 나눔글꼴) are unicode fonts designed especially for the Korean-language script, designed 

by Sandoll Communications (Korean : 산돌 커뮤니케이션) and Fontrix (Korean : 폰트릭스). The publisher is Naver. 

Nanum Gothic is a contemporary sans-serif with a warm touch and is expertly hinted for screen use.

Link

@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);

Example

font-family: 'Nanum Myeongjo', serif;
SIL Open Font License, 1.1 | Download


Nanum Pen Script (Korean)

The Nanum fonts (Korean : 나눔글꼴) are unicode fonts designed especially for the Korean-language script, designed 

by Sandoll Communications (Korean : 산돌 커뮤니케이션) and Fontrix (Korean : 폰트릭스). The publisher is Naver. 

Nanum Pen Script is a contemporary pen script with a warm touch and is expertly hinted for screen use.

Link

@import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);

Example

font-family: 'Nanum Pen Script', cursive;
SIL Open Font License, 1.1 | Download

저작자 표시 비영리 변경 금지
신고
BlogIcon VARIOUS INTERESTED PEOPLE

감사합니다!! 정말 유용한 글이에요. 다른 블로그에 올라오는 글들은 따라해도 안되는 경우도 많았는데 :)

BlogIcon 베누시안

해결됐다니 다행입니다.

BlogIcon VARIOUS INTERESTED PEOPLE

또한번 감사합니당. 요번에 워드프레스 공부하면서 배운 CSS랑 요소검사로 기분전환겸 스킨 수정하고 있어요! :)
잠시 워드프레스 공부는 못하고 있는데~ 그동안 공부했던게 꽤나 도움이 되네용. ^^

BlogIcon 베누시안

블로그에 가보니 공사중이네요. 되도록이면 미러 블로그를 만들고 작업한 다음에 스킨만 만들어서 블로그로 이동시키는게 좋은데요... 도움이 된다니 다행입니다. 이번에 나올 책을 보시면 더 좋은게 많을 겁니다.

BlogIcon VARIOUS INTERESTED PEOPLE

ㅎㅎ 넷, 미러블로그로 조금 하다가 마음이 급해서 본 블로그로 가져와 작업했네용~
아직 워드프레스 책도 다 못 깨우쳤지만, 새로운 책도 무척 기대됩니당. :)

BlogIcon 베누시안

책을 좀더 충실하게 하려고 이달 중에 부트스트랩 3.0 버전이 나올 예정인데 이에 관한 내용을 책에 추가하려고 또 바쁘네요. 책이 웹디자인에 대해 어느 정도 아시는 분을 대상으로 하므로 샤이니님은 적당할 수 있겠습니다.

티스토리 툴바