구글웹폰트 나눔폰트 적용하기

나눔글꼴 다운로드
다음체 다운로드

스켈레톤의 bootstrap – variables.less 파일에서 @font-family-korean을 디폴트로 설정한다. v3.0.4

@font-family-korean: "나눔고딕", NanumGothic, 'Apple SD Gothic Neo', "돋움", dotum, Arial, sans-serif;
@font-family-base: @font-family-korean;

Korean Fonts 글꼴이 다르게 표현되지 않는다면 설치가 필요합니다#

font-family	Example text
맑은 고딕 Malgun Gothic	말머리입니다. This is a heading# 단락입니다. This is a paragraph
나눔고딕 NanumGothic	말머리입니다. This is a heading# 단락입니다. This is a paragraph
다음체 daum_Regular	말머리입니다. This is a heading# 단락입니다. This is a paragraph
굴림 Gulim	말머리입니다. This is a heading# 단락입니다. This is a paragraph
돋움 dotum	말머리입니다. This is a heading# 단락입니다. This is a paragraph
바탕 Batang	말머리입니다. This is a heading# 단락입니다. This is a paragraph

Google Web Font 나눔글꼴로 편집디자인 활용#

편집디자인은 타이포그래피가 매우 중요하지만 불행이도 웹에서 한글을 포함한 2byte 글꼴은 용량이 매우 크다. 그래서 스켈레톤은 사이트 방문자에게 글꼴을 다운로드시키지 않는다. 우리나라에서는 나눔글꼴이 많이 배포되어 있고 공용으로 사용할 수 있는 구글웹폰트가 있다. 나눔글꼴이 설치되지 않은 컴퓨터에서도 표현된다. 나눔고딕, 나눔손글씨 펜, 나눔명조 등의 글꼴이 있어 편집디자인에 두루 활용된다. 스켈레톤에 구글웹폰트는 포함되지 않는다.

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

.nanum-g { font-family: 'Nanum Gothic'; }
.nanum-b { font-family: 'Nanum Brush Script'; }
.nanum-gc { font-family: 'Nanum Gothic Coding'; }
.nanum-m { font-family: 'Nanum Myeongjo';  }
.nanum-p { font-family: 'Nanum Pen Script'; }

Google 나눔폰트 폰트 설치 없이 모든 디바이스에서 출력됩니다. 로딩 딜레이가 있습니다.#

font-family	Example text
나눔고딕 Nanum Gothic	말머리입니다. This is a heading# 단락입니다. This is a paragraph
나눔손글씨 붓 Nanum Brush Script	말머리입니다. This is a heading# 단락입니다. This is a paragraph
나눔고딕 코딩 Nanum Gothic Coding	말머리입니다. This is a heading# 단락입니다. This is a paragraph
나눔명조 Nanum Myeongjo	말머리입니다. This is a heading# 단락입니다. This is a paragraph
나눔손글씨 펜 Nanum Pen Script	말머리입니다. This is a heading# 단락입니다. This is a paragraph

Serif Fonts#

font-family	Example text
Georgia, serif	This is a heading# This is a paragraph
“Palatino Linotype”, “Book Antiqua”, Palatino, serif	This is a heading# This is a paragraph
“Times New Roman”, Times, serif	This is a heading# This is a paragraph

font-family

Example text

Georgia, serif

This is a heading#

This is a paragraph

“Palatino Linotype”, “Book Antiqua”, Palatino, serif

This is a heading#

This is a paragraph

“Times New Roman”, Times, serif

This is a heading#

This is a paragraph

Sans-Serif Fonts#

font-family	Example text
Arial, Helvetica, sans-serif	This is a heading# This is a paragraph
“Arial Black”, Gadget, sans-serif	This is a heading# This is a paragraph
“Comic Sans MS”, cursive, sans-serif	This is a heading# This is a paragraph
Impact, Charcoal, sans-serif	This is a heading# This is a paragraph
“Lucida Sans Unicode”, “Lucida Grande”, sans-serif	This is a heading# This is a paragraph
Tahoma, Geneva, sans-serif	This is a heading This is a paragraph #
"Trebuchet MS", Helvetica, sans-serif	This is a heading This is a paragraph #
Verdana, Geneva, sans-serif	This is a heading This is a paragraph #