CSS HTML | 폰트이야기 | 상업용 무료 웹폰트 사용법 | @Font-face | @import

웹사이트와 블로그를 돋보이게 하는 것은 디자인이다. 폰트는 항상 웹에서 빼놓을 수 없는 중요한 요소다.

 

폰트의 역사를 잠깐 알아보면 가장 오래된 폰트 중의 하나는 굴림체이다.

 

인터넷 초창기 시절부터 MS 윈도우에서 기본으로 제공해서 별 생각없이 사용했던 굴림체라 별 거부감은 들지 않는다. MS-DOS 시절을 생각하면 컴퓨터에 한글이 잘 나온다는 사실만으로도 반갑던 때가 있었다. MSX 같은 교육용 컴퓨터에서 한글 폰트가 있었다고 하는데 용량을 생각하면 지금 처럼 제대로 사용은 어려웠을 것이다.

 

시간이 흘러 2020년 현재 굴림체하면 왠지 모르게 촌스럽게 느껴진다. 위키백과에 따르면 굴림체는 70년대 중반부터 사용되 왔다고 한다. 그렇게까지 오래된 폰트였는지 처음 알았다;;; 70년대에 활자 기계 (타자기가 존재하던 시절)에 일본어 폰트인 나루체를 본따 제작하였다는 유래다.

 

굴림체 - 위키백과, 우리 모두의 백과사전 (wikipedia.org)

굴림체 - 위키백과, 우리 모두의 백과사전

현재 윈도우10의 기본 글꼴은 '맑은 고딕'인데 필자도 직장에서 굴림체로 초안을 작성한 문서를 최종적으로 '맑은 고딕' 폰트로 변경했던 기억이 있다. 굴림체 이후 맑은 고딕의 시대 부터는 글을 쓸만했다.

 

사실 폰트에는 과학적인 원리가 숨겨져 있는데 유튜브 채널 '널 위한 문화 예술'의 굴림체가 구려보이는 이유 라는 영상에 자세하게 나와있다. 일본어 폰트를 참고하여 제작하다 보니 한글의 특성이 잘 드러나지 않아서 글자의 획(선) 사이가 커지거나 하는 등의 이유로 가독성이 떨어지게 만들어졌다고 한다.

 

우리가 몰랐던 굴림체에 숨겨진 비밀?? - YouTube

널위한문화예술

2010년대 이후 또 세상이 변하면서 새로운 폰트가 출현하기 시작한다. 유저들이 폰트 장인들이 한땀한땀 만든 폰트에 대해 눈을 뜨기 시작했으며 '배달의민족 도현체' 등 마케팅 적으로 성공한 폰트들도 세상에 빛을 보기 시작했다.

 

폰트 제작은 세부적으로 들어가면 도트 작업을 해야 하는 일인데 한국 사람들은 이런일을 잘하는 DNA가 탑재되어 있다. 젓가락을 사용해서 인가? 근거는 없는 이야기지만 젓가락으로 콩을 집어 먹을 정도의 정교한 컨트롤이 폰트감각과도 연관이 있다고 생각한다. 근거는 없지만 그럴듯하다.

 

 영문 폰트와 비교해봐도 한글 폰트는 정말 아름답고 개성이 강한 폰트가 많이 있다. 지금도 폰트 장인들의 부단한 노고에 힘입어 새로운 폰트가 개발되고 있다는 것은 놀라운 일이다.

 

이런 폰트들이 어디에 있을까? 그리고 폰트들을 개인이 사용할 수 있을까? 저작권 문제는 없을까?

 

- 정답은 가능하다! 개인의 웹사이트나 앱, 광고물들에 사용할 수 있는 폰트들이 많이 있다.

 

*한글 폰트를 찾는다면 첫번째로 확인할 곳은 상업용 무료한글폰트를 제공하는 눈누이다.

 

눈누 상업용 무료한글폰트 사이트 (noonnu.cc)

상업적 이용 가능한 무료 한글 폰트 모음 사이트 눈누

이 사이트에는 유료와 무표 폰트를 다운로드 받을 수 있다.

 

웹폰트를 처음 사용한다면 우선은 눈누 웹사이트를 둘러보는 것을 권한다.

 

폰트는 저작권에 민감하기 때문에 인터넷에 돌아다니는 폰트들을 아무 생각없이 자신의 웹사이트에 사용했다가는 저작권 문제에 걸릴 수 있으니 반드시 사용 허가가 있는 폰트를 사용해야 한다.

 

눈누의 다양한 폰트

한눈에 봐도 개성적인 디자인의 폰트가 많이 있다.

 

개별 폰트를 클릭해서 들어가보면 라이선스에 대한 내용이 게시되있다. 고지 내용에 따라서 사용하면 된다.

 

*영문 폰트는 구글 폰트부터 검색한다. 구글은 미국회사니까 다양한 영문 폰트가 등록되어 있다. 필자의 경우 코딩할 때 IDE에서 사용하려고 Source Code Pro 나 Hack 폰트를 다운받아 사용하고 있다. 이 둘은 영어 사이트에서 가장 많이 사용하는 코딩용 폰트이고 이 블로그의 소스코드를 게시하는 코드블록에도 적용되 있다. 또 구글 폰트에도 본고딕 등 자주 쓰는 한국어 폰트가 20여개 이상 등록되어 있다.

 

구글이 서비스하는 폰트니까 안정감이 있어서 많이 쓰게 된다.

 

Browse Fonts - Google Fonts

Google Fonts

---

*HTML CSS에서 한글 웹폰트 사용하기, @font-face

폰트를 다운로드해서 웹서버에 설치할 수도 있고 웹에서 CDN (다른 웹사이트 서버에서 폰트를 클라이언트로 다운로드 받는 것) 방식으로 사용하면 웹폰트이다.

 

웹폰트는 네트워크의 다른 컴퓨터의 자원을 사용하기 때문에 자신의 웹서버 자원을 사용하지 않아도 된다는 장점이 있다. 이 문서에서는 웹폰트 방식으로 사용할 것이다.

 

눈누에서 '넥슨 메이플 스토리체'를 적용해보자.

 

눈누 상업용 무료한글폰트 사이트 (noonnu.cc)

상업적 이용 가능한 무료 한글 폰트 모음 사이트 눈누

 

웹페이지에서 아래와 같은 폰트페이스 코드를 복사한다. CSS를 수정할수도 있지만 일단 제작사가 제시한 코드 그대로 실행이 되는지 확인한 후에 하는 것이 좋다. 아래 파일을 CSS 파일에 집어넣는다.

@font-face {
    font-family: 'MaplestoryOTFLight';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/MaplestoryOTFLight.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

 

현재 font-family 이름이 MaplestoryOTFLight 라고 되있다. OTF 형식의 Light 가벼운 글꼴(반대로 bold 같이 진한 글꼴을 무겁다고 한다) 이다. 이 이름을 그대로 CSS에 적용하여 실행시킨다.

p {
    font-family: 'MaplestoryOTFLight';
    font-size: 1.2em;
}

출력이 잘 되었다! HTML 파일을 조작하지 않고 CSS 파일만 관리하면 되니 코드도 깔끔하게 만들 수 있다.

 

*구글 웹폰트 사용

 

구글 웹폰트에서 Source Serif Pro 를 검색하여 semi-bold 타입을 선택하면 위와 같이 뜬다. link 방식과 @import 방식이 있는데 import 방식이 더 뚜렷해 보여서 이쪽을 사용한다. 구글은 이 링크를 googleapi 의 하나로 관리한다. ? 뒤에 넣는 조합에 따라 폰트를 특정할 수 있어서 성능이 좋다.

(폰트를 전부 다운로드 받는게 아니라 선택한 속성으로 다운로드한다.)

 

구글에서 제공하는 코드를 HTML의 head안에 넣는다. 만약 CSS 파일에 넣고싶다면 style 태그는 제거하고 넣어야 한다.

<style>
	@import url('https://fonts.googleapis.com/css2?family=Source+Serif+Pro:wght@600&display=swap');
</style>

 

googleapi 를 다운로드한 곳의 아래에 사용법이 나와있다. font-family 에 serif 형은 serif 라고 지정해줘야 제대로 출력된다. 그대로 복사해서 CSS 파일에 넣자.

 

보다시피 영문이 멋있게 나왔다. 영문 폰트라 그런지 상대적으로 한글 폰트는 얇고 앙상한 느낌이다. 필자의 경우 한글을 거의 안쓰는 코딩에 사용한다.

 

* 구글 웹폰트 저작권 관련 : 폰트 페이지의 하단을 확인하면 Open Font License 를 따른다고 나온다. 구글 웹폰트는 거의 OFL 이지만 저작권은 항상 개별적으로 확인하는 습관을 갖도록 한다. 저작권 관련 문제는 민감하니 평소에 항상 신경을 쓰는게 좋다.

 

Open Font License (OFL) 은 저작권 걱정없이 무료로 사용할 수 있다.

 

SIL Open Font License (OFL)

SIL Open Font License (OFL)

이것으로 멋있고 다양한 웹폰트를 사용할 수 있게 되었다!

 

이 둘은 대표적인 사이트이고 인터넷에는 다양한 OFL 소스가 있으니까 검색을 통해 찾아 사용할 수 있다.

 

물론 한글은 영어에 비하여 폰트 수가 적다. 전세계의 영어 사용자는 11억명이고 한글 사용자는 어림잡아 8000만명 정도 된다. 그래도 8,000만명이면 꽤 많은 사람이 아닌가? 앞으로 더 많은 폰트 장인의 활약이 기대되는 부분이다.

 

아직도 웹의 상당수는 기본 글꼴을 활용한다. 그러니 웹폰트를 잘 사용하는 것도 능력이 되는 날이 올 것이다.

 

850+ Open Source Fonts (OFL) › Fontesk 이런 사이트들을 잘 검색해서 사용하자.

850+ Open Source Fonts (OFL) › Fontesk