본문 바로가기

WEB_TECH/웹개발TIP

웹페이지에서 나눔고딕 사용하는 방법

다음의 코드를 실행해 봅시다. 


이렇게 하면 구글에서 제공하는 웹폰트인 나눔폰트를 링크하게 됩니다.
네이버에서 나눔폰트를 무료로 공개했기 때문에 
구글에서도 무료로 api를 제공할 수 있습니다.
한글은 아마 무료폰트가 나눔폰트가 유일하지 않나 싶네요.


<!DOCTYPE html>

<html lang="kr">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>나눔웹폰트</title>

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

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

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

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

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

<style>

#f1 { font-family: 'Nanum Brush Script', serif; }

#f2 { font-family: 'Nanum Gothic', serif; }

#f3 { font-family: 'Nanum Gothic Coding', serif; }

#f4 { font-family: 'Nanum Myeongjo', serif; }

#f5 { font-family: 'Nanum Pen Script', serif; }

</style>

</head>


<body>


<h1 id="f1">나눔브러쉬</h1>

<h1 id="f2">나눔고딕</h1>

<h1 id="f3">나눔고딕코딩</h1>

<h1 id="f4">나눔명조</h1>

<h1 id="f5">나눔펜</h1>

</body>

</html>



브라우저에서 실행시켜보면 각각의 나눔폰트로 출력되는 것을 확인할 수 있습니다.