웹개발 메모장

[웹폰트] 구글폰트에서 나눔고딕 웹폰트 적용하기

전체 자바스크립트 CSS PHP HTML 기타
등록일 :

나눔고딕 웹폰트 사용하기

구글폰트에서 제공하는 나눔고딩 웹폰트를 사용하는 방법입니다.
사용법은 간단합니다. ^^*

다람쥐 쳇바퀴 이제그만~ 123 abc ABC !@#
font-weight:bold 다람쥐 쳇바퀴 이제그만~ 123 abc ABC !@#
font-weight:400 다람쥐 쳇바퀴 이제그만~ 123 abc ABC !@#
font-weight:700 다람쥐 쳇바퀴 이제그만~ 123 abc ABC !@#
font-weight:800 다람쥐 쳇바퀴 이제그만~ 123 abc ABC !@#
뷁 뤵 샓 찦차 싴

CSS

/* 이렇게 링크해서 사용하면 됩니다 */
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800');

/* 폰트 이름은 'Nanum Gothic' 입니다. 공백이 있으므로 주의해 주세요. */
/* font-family : 'Nanum Gothic'; 으로 지정해 줍니다. */
.text_box {
	font-family : 'Nanum Gothic';
	text-align : center;
	padding : 10px 0;
}

HTML

<div class="text_box" style="font-size:14pt;">
	다람쥐 쳇바퀴 이제그만~ 123 abc ABC !@#
</div>

<!-- font-weight : bold -->
<div class="text_box" style="font-size:14pt; font-weight:bold;">
	font-weight:bold 다람쥐 쳇바퀴 이제그만~ 123 abc ABC !@#
</div>

<!-- font-weight : 400 -->
<div class="text_box" style="font-size:14pt; font-weight:400;">
	font-weight:400 다람쥐 쳇바퀴 이제그만~ 123 abc ABC !@#
</div>

<!-- font-weight : 700 -->
<div class="text_box" style="font-size:14pt; font-weight:700;">
	font-weight:700 다람쥐 쳇바퀴 이제그만~ 123 abc ABC !@#
</div>

<!-- font-weight : 800 -->
<div class="text_box" style="font-size:14pt; font-weight:800;">
	font-weight:800 다람쥐 쳇바퀴 이제그만~ 123 abc ABC !@#
</div>

<!-- 폰트 테스트 -->
<div class="text_box" style="font-size:24pt;">
	뷁 뤵 샓 찦차 싴
</div>

이 사이트도 나눔고딕 웹폰트를 사용중 입니다.

실행 가능한 소스

링크 방식과 import 방식 추가 정보

폰트는 일반 400, 굵은 700, 더 굵은 800 세가지 사이즈가 있습니다.
800 사이즈의 경우 사용하지 않는다면 로딩하지 않는게 좋습니다.
다운받는 용량이 줄어들기 때문입니다.

아래 예제를 참고해 주세요 ^^

링크 방식

<!-- 일반(400), 굵은(700) 폰트 로드 -->
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700" rel="stylesheet">

<!-- 일반(400), 굵은(700), 더굵은(800) 폰트 로드 -->
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800" rel="stylesheet">

import 방식

<style>
	/* 일반(400), 굵은(700) 폰트 로드 */
	@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700');

	/* 일반(400), 굵은(700), 더굵은(800) 폰트 로드 */
	@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800');
</style>

CSS

/* 폰트 이름 */
font-family: 'Nanum Gothic', sans-serif;

타이핑 해보기

아래에 직접 타이핑 해보세용~
font-size :     font-weight :