구글 웹 폰트, 한글 웹 폰트 사용하기

블로그/블로그 꾸미기
구글 웹 폰트, 한글 웹 폰트 사용하기

한글 웹 폰트를 이용하려면 먼저 구글 웹 폰트에 접속해야 합니다. 접속 후 상단에 있는 More scripts를 클릭하면 새 탭이 열립니다. 스크롤 바를 아래로 쭉~~ 내리면 한나체가 보이고 계속해서 제주 고딕, 제주 한라산, 제주 명조, KoPub 바탕, 나눔 손글씨 붓, 나눔 고딕, 나눔 고딕코딩, 나눔 명조, 나눔 손글씨 펜 순으로 10개의 한글 웹 폰트가 있습니다.

구글 폰트(Google Fonts)

구글 폰트 나눔 고딕

한글 웹 폰트를 설치하기 전에 다음 글을 먼저 읽어 보시기 바랍니다.
2014/11/27 - 구글 웹 폰트 빠르게 불러오는 방법

한글 웹 폰트 설치하기

모든 폰트의 설치 방법은 같으므로 가독성이 좋은 나눔 고딕을 예로 설명합니다. 위 그림처럼 나눔 고딕을 선택하면 Link와 Example에 각각의 소스코드가 있습니다.

Link 소스코드 적용방법

▼ 임포트 방식으로 로드하려면 style.css 파일 최상단에 소스코드를 추가하면 됩니다.

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

▼ 이전 글 "구글 웹 폰트 빠르게 불러오는 방법"을 읽어 보셨으면 아시겠지만, 구글 웹 폰트는 참조 링크 방식으로 불러오는 것이 훨씬 안정적이고 빠릅니다. 따라서 HTML 편집에서 <head> 태그 후 가장 먼저 로드되도록 CSS 파일 앞에 구글 웹 폰트 소스코드를 배치합니다. 이렇게 하면 구글 웹 폰트가 CSS 파일보다 먼저 로드하게 되고, 그 뒤를 CSS 파일이 따르게 되므로 CSS 파일에서 글꼴 태그를 취향에 따라 원하는 대로 디자인할 수 있습니다. (추천)

<html>
<head>
<link rel='stylesheet' href='http://fonts.googleapis.com/earlyaccess/nanumgothic.css'>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div>구글 웹 폰트, 한글 웹 폰트 사용하기</div>
</body>
</html>

Example 소스코드 적용방법

▼ style.css 편집에서 Ctrl 키와 F 키를 동시에 눌러 검색창을 호출한 뒤 font-family를 검색하여 나눔 고딕을 적용하고 싶은 곳에 'Nanum Gothic'을 추가해 주면 됩니다.

body {
    background-color: #fff;
    color: #555;
    font-family: "Nanum Gothic","맑은 고딕","Malgun Gothic","돋움",dotum,sans-serif;
    font-size: 15px;
    line-height: 1.5em;
}

한글 웹 폰트 종류별 소스 코드

구글 웹 폰트에서 쓸 수 있는 한글 웹 폰트는 현재(2014년 12월) 10종의 서체가 있으며 각 폰트의 소스코드는 아래와 같습니다. 본문 글이 복사가 안 되는 분들은 한글 웹 폰트를 내려받으세요.

Hanna
@import url(http://fonts.googleapis.com/earlyaccess/hanna.css);
font-family: 'Hanna', serif;

Jeju Gothic
@import url(http://fonts.googleapis.com/earlyaccess/jejugothic.css);
font-family: 'Jeju Gothic', serif;

Jeju Hallasan
@import url(http://fonts.googleapis.com/earlyaccess/jejuhallasan.css);
font-family: 'Jeju Hallasan', serif;

Jeju Myeongjo
@import url(http://fonts.googleapis.com/earlyaccess/jejumyeongjo.css);
font-family: 'Jeju Myeongjo', serif;

KoPub Batang
@import url(http://fonts.googleapis.com/earlyaccess/kopubbatang.css);
font-family: 'KoPub Batang', serif;

Nanum Brush Script
@import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
font-family: 'Nanum Brush Script', serif;

Nanum Gothic
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
font-family: 'Nanum Gothic', serif;

Nanum Gothic Coding
@import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);
font-family: 'Nanum Gothic Coding', serif;

Nanum Myeongjo
@import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
font-family: 'Nanum Myeongjo', serif;

Nanum Pen Script 
@import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);
font-family: 'Nanum Pen Script', serif;
마무리 하면서...

블로그나 웹 사이트의 글꼴은 제목을 위한 굵은 형식의 글꼴과 문서를 위한 가독성이 좋은 글꼴 - 최대 2개의 글꼴을 선정하는 것이 좋습니다. 글꼴을 많이 선정할수록 로딩 시간이 길어져 사이트가 버벅거릴 수 있으므로 주의해야 합니다!

+ 댓글은 큰 힘이 됩니다.
  • default-image
    프랭키 2015.06.11 17:54

    정말 정말~ 도움이 많이 됐어요. 깔끔하게 메모장으로 정리까지 해주시고!
    감사합니다!

  • default-image
    BlogIcon 블로마리 2015.06.11 19:38 신고

    반갑습니다. 프랭키님~!
    도움이 되셨다니 저도 기쁨니다.
    계속해서 좋은 시간 되시길...

  • default-image
    2015.11.29 02:32

    비밀댓글입니다

    • default-image
      BlogIcon 블로마리 2015.11.29 09:19 신고

      style.css는 원래 있는 것이니까 나눔고딕 한 줄만 넣어주면 됩니다.
      그런 다음 나눔 고딕을 적용하고 싶은 곳에 'Nanum Gothic'을 추가해 주면 됩니다.

  • default-image
    BlogIcon SONYLOVE 2016.02.25 22:36 신고

    지원되는 웹폰트 종류가 많이 늘어났으면 좋겠어요. ㅎㅎ

  • default-image
    BlogIcon 블로마리 2016.02.26 00:24 신고

    그럼 좋죠..ㅎㅎ

  • default-image
    BlogIcon 루키맘 2016.02.28 03:08 신고

    감사합니다~! 덕분에 쉽게 찾았어요~

  • default-image
    BlogIcon 블로마리 2016.02.28 03:43 신고

    도움이 되었다니 저도 기쁘네요~ㅎㅎ
    계속해서 좋은 시간되세요!!