CSS / 구글 웹폰트 사용하는 방법
구글에서 많은 웹폰트를 제공하고 있습니다. 어떻게 사용하는지, IE를 지원하는 방법은 무엇인지 알아보겠습니다.
글꼴 선택하고 코드 얻기
구글 웹폰트에 접속합니다. 한글 웹폰트가 필요하다면 Languages를 Korean으로 설정합니다.
+ 버튼을 클릭하여 글꼴을 선택합니다. 여러 개를 선택해도 됩니다.
아래에 있는 검은 색 바를 클릭합니다.
구글 웹폰트를 사용할 수 있는 코드가 있는데, 기본 스타일 외에 다른 스타일을 선택하거나 한글을 사용하려면 CUSTOMIZE를 클릭합니다.
필요한 스타일을 체크합니다.
일단 다 체크를 했습니다.
이제 코드를 복사합니다. STANDARD와 @IMPORT 중 고를 수 있습니다.
사용하기
다음은 위에서 선택한 나눔 고딕을 사용한 간단한 예제입니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800&subset=korean" rel="stylesheet">
<style>
p {
font-family: "Nanum Gothic", sans-serif;
font-size: 23px;
}
p.a {
font-weight: 400;
}
p.b {
font-weight: 700;
}
p.c {
font-weight: 800;
}
p.d {
font-weight: bold;
}
</style>
</head>
<body>
<p class="a">400 : Lorem Ipsum Dolor 하늘 바다 시나브로</p>
<p class="b">700 : Lorem Ipsum Dolor 하늘 바다 시나브로</p>
<p class="c">800 : Lorem Ipsum Dolor 하늘 바다 시나브로</p>
<p class="d">bold : Lorem Ipsum Dolor 하늘 바다 시나브로</p>
</body>
</html>
TIP
- 구글 웹폰트에서 제공하는 웹폰트는 WOFF2 형식으로 IE는 지원하지 않습니다. 만약 IE를 지원하려면 다운로드하여 사용합니다. CSS / TIP / 인터넷 익스플로러(IE)에서 구글 웹폰트 사용하는 방법
- 본고딕, 제주 고딕 등 몇 가지 한글 글꼴은 Early Access에 있습니다. Korean으로 검색해보세요.