굴림체에서 벗어나자! 웹폰트 활용하기

지난  ‘웹페이지에 굴림체만 보이는 이유, 웹폰트 이해하기’에서는 웹의 매체 특성 때문에 OS에 설치되지 않은 글꼴을 사용하려면 웹폰트를 사용해야 한다고 말씀드렸습니다. 그리고 웹폰트의 아름다움과 그 가능성에 대해 함께 알아보았는데요. 이번에는 이런 웹폰트를 어떻게 하면 잘 활용할 수 있는지, 기초부터 차근차근 알아보도록 하겠습니다.

웹폰트 불러와 사용하기

웹페이지는 많은 정보로 이루어져 있습니다. 아주 기본적인 텍스트 정보부터 사진, 그림과 같은 이미지 정보는 물론 동영상 정보도 불러올 수도 있습니다. 이 모든 것들은 웹페이지에서 HTML 태그와 몇 가지 기술로 ‘불러오는’ 것들입니다. 호출한다고 표현하기도 하는데, 영어로는 loading으로 쓰곤 합니다. 웹폰트도 다르지 않습니다. 웹페이에서 ‘불러와(loading)’ 사용하는 것일 뿐입니다. 그럼 웹폰트는 어떻게 불러올까요? 

가장 먼저 웹페이지에서 사용하고 있는 CSS파일 안에서 불러오기(import) 할 수 있습니다. 만약 index.html 에서 style.css를 사용하고 있습니다. 그럼 style.css의 상담에 다음과 같은 코드를 넣어 웹폰트를 불러올 수 있습니다. 

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

또는 html 페이지에 <link>태그로 바로 적용할 수도 있습니다.

<link href="https://fonts.googleapis.com/css?family=Lora" rel="stylesheet">

위와 같은 구조로 html페이지에서 ‘나눔고딕’ 웹폰트를 사용할 수 있습니다. 주소(URL)를 보면 googleapis.com이라는 주소가 보입니다. 구글에서 온라인에 폰트를 올려두고 우리에게 무료로 웹폰트를 서비스해 주고 있는 것이죠. 간편하게 웹폰트를 사용할 수 있는 이유입니다. 사용 방법은 아래와 같습니다. 

1. https://fonts.google.com/ 에 접속합니다.

2. 마음에 드는 웹폰트를 찾습니다. 

3. 우측 상단의 +버튼을 눌러 ‘Family selected’에 담습니다

4.  ‘Family selected’를 열어보면 <link> 또는 @import방법이 나옵니다.

5. 내 웹페이지에 적용합니다.

6. fonts.google.com에서는 영문 폰트만 볼 수 있습니다. 한글은 https://www.google.com/fonts/earlyaccess 를 방문하여 찾아봅시다.

웹폰트 직접 만들어 사용하기

google fonts의 수많은 지원 웹폰트에도 불구하고 마음에 드는 글꼴이 없을 때는? 웹폰트를 직접 만들어서 쓸 수 있습니다. 물론 사용하려는 웹폰트의 저작권 문제가 해결되어야 합니다. 웹폰트를 만드는 가장 손쉬운 방법은 온라인 생성기를 이용하는 방법입니다. 대표적인 생성기인 Web font generator를  사용하는 방법을 알아보겠습니다. 

1. Web font generator 에 접속합니다.
2. 가지고 있는 폰트 파일(주로 TTF파일)을 선택하고, 하단의 저작권 관련 내용을 확인합니다.
3. 웹폰트가 생성되었습니다.
4. 웹폰트 세트가 묶인 압축 파일을 다운로드합니다.

생성기를 통해 만들어진 웹폰트와 CSS파일을 가지고 있는 서버에 올리고 웹페이지에서 불러와 사용할 수 있습니다. 여기서 잠깐 style.css파일을 살펴보겠습니다.

@import처럼 @로 시작하는 몇 줄의 코드가 보입니다. 2행의 font-family는 앞으로 쓸 폰트의 이름입니다. 기본적으로 업로드한 폰트명으로 설정되지만 다른 것으로 바꾸어도 무관합니다. 그리고 이어 나오는 src는 폰트파일의 경로입니다. 생성된 폰트 파일의 경로를 한 줄 씩 보여주고 있는데요. 폰트는 하나인데 이렇게 복잡한 코드가 필요한 이유는 사용자들이 쓰는 브라우저가 각기 다르기 때문입니다. 브라우저마다 필요한 글꼴의 형식이 달라 이렇게 여러 줄로 안전하게 사용하는 것이죠. 

style.css안의 내용을 우리가 사용 중인 CSS파일 상단에 넣으면 지정한 font-family로 웹폰트를 사용할 수 있습니다. 

웹폰트 서비스 이용하기

웹폰트를 사용하고 싶지만 만드는 과정이 쉽지 않고, 저작권 문제가 걱정되는 것이 사실입니다. 웹폰트 생성기를 통해 상용 폰트를 웹폰트로 만들어 사용할 수도 있지만 그에 따른 저작권 책임은 온전히 사용자의 몫이기 때문입니다. 그럴 때는 유료 웹폰트 서비스를 사용해볼 수 있습니다. 저작권을 가진 웹폰트를 회원가입을 통해 나의 웹사이트에 사용하고 그에 따른 사용료를 지불하는 방식입니다. 

국내에는 아직 많이 사용되고 있지 않지만, 영미권에서는 유료 웹폰트 사용이 매우 활발합니다. Adobe에서 운영하는 Typekit이나  Monotype에서 운영하는 fonts.com이 대표적입니다. Helvetica, Futura 등 알만한 상용 폰트들을 웹에서 서비스하고 있습니다. 단순히 같은 폰트를 온라인에 올려놓은 것이 아니고, 종이가 아닌 스크린 환경에 최적화된 버전들을 서비스하고 있습니다. 

하지만 아직 한글 웹폰트를 서비스하는 곳은 많지 않습니다. 타입스퀘어를 통해 웹폰트 서비스의 사용 방법을 알아보도록 하겠습니다. 

1. 회원가입 후, 로그인합니다.

2. 이용 중인 플랜 중 ‘무료 플랜’을 선택합니다.

3. 이용 범위를 확인합니다.

4. 이용사이트를 등록합니다.

5. 다시 위로 올라와 전용 태그를 복사하여 웹페이지에 추가합니다. 

6. font-family 를 설정합니다.

이용 방법이 무료 서비스에 비해 다소 복잡합니다. 회원이 등록한 사이트에만 제한적으로 웹폰트를 서비스하기 때문입니다. 

마치며

웹폰트는 참 매력적인 도구입니다. 굴림과 바탕으로 밋밋하고 못난 웹페이지를 고급스러운 디자인으로 보이도록 해주기 때문입니다. 화면 밖의 타이포그래피는 참 화려합니다. 수많은 디자이너가 좋은 서체를 활용하여 더욱 아름답고 멋진 디자인을 위해 노력하고 있습니다. 하지만 웹에서는 아직 사용할 수 있는 자원이 많지 않습니다. 특히 한글 글꼴 지원은 아직 걸음마 수준입니다. 웹폰트에 대한 관심이 차츰 성장하고, 다양한 웹폰트 사용이 꾸준히 늘어나 웹페이지에서도 아름다운 타이포그래피를 볼 수 있길 바랍니다.