웹폰트를 만들어서 사용하는 것보다 웹폰트를 제공하는 사이트를 이용하는게 훨씬 편합니다. 간단한 코드 몇 줄로 바로 적용시킬 수 있습니다.
대표적인 웹폰트 제공 사이트는 Google Fonts입니다. 600개가 넘는 웹폰트가 있으며, 누구나 무료로 사용할 수 있습니다.
http://www.google.com/fonts
하지만, 여기에는 영어 글꼴만 있습니다. 한글을 비롯한 영어 이외의 글꼴은 Google Fonts Early Access로 가야합니다.
http://www.google.com/fonts/earlyaccess
Ctrl+F로 찾기를 열고 Korean으로 검색합니다. 제일 처음 나오는 한글 웹폰트는 Hanna입니다.
글꼴 설명과 함께 두 줄의 코드가 있습니다.
@import url(http://fonts.googleapis.com/earlyaccess/hanna.css);
글꼴을 사용할 수 있게 불러오는 코드입니다. CSS 코드 제일 위에 입력하면 됩니다.
font-family: 'Hanna', serif;
글꼴을 사용하는 예제 코드입니다. 글꼴 이름을 Hanna로 하면 글꼴을 사용할 수 있다는 뜻입니다.
간단한 예는 다음과 같습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS | Google Font</title>
<style>
@import url(http://fonts.googleapis.com/earlyaccess/hanna.css);
h1 {font-family: 'Hanna';}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
</body>
</html>
Google Fonts Early Access에는 현재 총 6개의 한글 글꼴이 있습니다. 위의 예제에서 사용한 하나 글꼴과 나눔고딕, 나눔고딕코딩, 나눔명조, 나눔손글씨붓, 나눔손글씨펜입니다.
각 글꼴을 한 번에 볼 수 있는 예제는 다음과 같습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS | Google Fonts</title>
<style>
@import url(http://fonts.googleapis.com/earlyaccess/hanna.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.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);
.hn {font-family: 'Hanna';}
.nbs {font-family: 'Nanum Brush Script';}
.ng {font-family: 'Nanum Gothic';}
.ngc {font-family: 'Nanum Gothic Coding';}
.nm {font-family: 'Nanum Myeongjo';}
.nps {font-family: 'Nanum Pen Script';}
</style>
</head>
<body>
<h1 class="hn">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<h1 class="nbs">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<h1 class="ng">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<h1 class="ngc">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<h1 class="nm">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
<h1 class="nps">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
</body>
</html>
'웹 퍼블리싱 > Css' 카테고리의 다른 글
| css 아키텍쳐 구성하기 (0) | 2024.03.11 |
|---|---|
| css 배경이미지 100%로 설정하는 방법 (0) | 2015.07.17 |
| CSS에 대해 잘 알려져있지 않은 12가지 사실 (0) | 2015.07.16 |