무료 웹 폰트로 쉽게 내 사이트를 디자인 하자!

2013. 12. 17. 17:07
저자 : Kurien

폰트다운, 무료폰트, 글꼴, 글꼴다운, 손글씨폰트, 예쁜폰트, 이쁜글씨체, 고딕체, 손글씨체, 나눔고딕, 웹폰트, 클라우드폰트타이포링크로 바로 가기


오늘은 웹 폰트(글꼴)를 지원해 주는 사이트!

클라우드 폰트, 타이포 링크에 대해 알아보겠습니다.


※ 자세히 설명하기 위해 글은 길지만 대부분 이미지이고, 직접 하면 금방 따라하실 수 있습니다.

웹 폰트(웹 글꼴)란?

웹 브라우저에는 사용자의 컴퓨터에 설치된 폰트만 사용 할 수 있습니다.

제가 A라는 폰트가 있더라도 웹페이지를 본 사람이 A라는 폰트가 없다면 정상적으로 보이지 않게 되는거죠.


이러한 문제를 해결 하기 위해 사용되는 방법이 바로 웹 폰트입니다.

기본적으로 정상적으로 웹 폰트를 표시하기 위해서는 해당 폰트, 글꼴을 다운 받고 웹에 올려서 사용해야 하는데요.

이게 말이 쉽지 사실상 쉽지 않습니다.

이 타이포링크 웹 폰트는 사용자가 웹에 접속하는 순간 폰트를 자동으로 받고 웹페이지를 정상적으로 표시할 수 있게 만들어줍니다.


소개 해 드릴 사이트는 Typolink, 타이포링크(http://typolink.co.kr)입니다!


타이포링크란?

타이포링크는 쉽게 말해 웹 폰트를 지원해주는 사이트입니다.


타이포 링크를 사용하는 이유...?

캘리그라피, 켈리그라피, 타이포그라피, 워드프레스, 자바스크립트, 웹표준, css

1,000개 이상의 웹폰트가 있습니다.

타이포링크의 웹폰트로 웹사이트의 디자인은 풍성해 집니다. 
모든 웹사이트의 동일한 폰트가 아닌, 기본적인 고딕체에서부터 나눔고딕, 손글씨체, 캘리그라피(켈리그라피) 폰트 등 컨셉에 맞는 예쁜폰트들을 사용하실 수 있습니다. 
게다가 타이포링크의 폰트는 계속해서 추가가 됩니다.

사용이 쉽습니다.

누구나 쉽게 웹폰트를 쓰고 바꿀 수 있습니다. 
몇 줄의 코드 입력만으로 다양한 브라우저와 최신 디바이스에 쉽게 적용되고, 자바스크립트나 CSS의 압박도 적습니다.
게다가 합리적인 가격과 간단한 사용법으로 운영비용이 절감됩니다.

빠르고 안정적입니다.

독자적인 폰트압축기술로 폰트의 용량을 획기적으로 줄였습니다. 
폰트서버에 CDN(contents delivery network) 기술을 적용하여 웹폰트의 전송이 여느 웹 폰트보다 빠르고 안정적입니다.

웹접근성과 SEO(검색엔진 최적화)효과를 높혀줍니다.

그래픽텍스트가 'DB화' 되어 사이트의 '웹접근성'과 'SEO효과'를 높힐 수 있습니다.
100% 웹표준 HTML과 CSS를 지원하고 다양한 디바이스 최적화를 위한 
반응형웹과 모바일웹 구현에도 효과적입니다.


사용 방법

먼저 회원가입을 해야 합니다.

캘리그라피, 켈리그라피, 타이포그라피, 워드프레스, 자바스크립트, 웹표준, css

회원가입은 외국사이트처럼 메일주소와 비밀번호만 적으시면 가입이 가능하구요.


캘리그라피, 켈리그라피, 타이포그라피, 워드프레스, 자바스크립트, 웹표준, css

가입 후 이메일 인증만 하면 됩니다.


캘리그라피, 켈리그라피, 타이포그라피, 워드프레스, 자바스크립트, 웹표준, css

가입 하신 후 로그인을 하시고, MY ACCOUNT를 눌러 도메인 관리로 들어가줍니다.

도메인에 자신이 웹 폰트를 사용할 사이트의 주소를 넣어주세요.

저의 경우 kurien.tistory.com이라고 적었는데요.

이 부분을 해주지 않으시면 적용이 되지 않습니다.

적고 도메인 등록을 해주시면 됩니다.


캘리그라피, 켈리그라피, 타이포그라피, 워드프레스, 자바스크립트, 웹표준, css

이제 원하는 폰트를 골라야겠죠?

먼저 폰트 둘러보기에서 원하는 폰트를 눌러줍니다.

저의 경우 무료 폰트를 이용했는데요.

오른쪽 사이드바를 보시면 San Serif, Serif, Handwriting, Display 4가지 타입이 있는데요.

모양을 보고 손글씨폰트, 예쁜 폰트, 이쁜 글씨체, 고딕체, 손글씨체, 나눔고딕 등 자신이 원하는 스타일의 폰트를 골라보세요.

저는 Display 속성을 골라서 두번째로 보이는 Cabin Sketch를 적용해봤습니다.

고른 폰트를 꾸욱 눌러주세요!


캘리그라피, 켈리그라피, 타이포그라피, 워드프레스, 자바스크립트, 웹표준, css

누르시면 위와같은 화면이 나오는데요.

1. 폰트선택 부분의 체크박스에 체크가 안되어있습니다.

체크 해주시면 되는데요, 여러개가 있을때는 샘플을 보신 후 원하는 폰트를 선택하시면 됩니다.

다른건 손댈 필요가 없구요, 3번 코드를 복사 해주신 후 <head></head> 사이에 붙여넣기!

CSS에 4번 폰트명 추가는 <head>와 </head> 사이에 <style></style>을 적어주시고 그 사이에 붙여 넣어주시면 됩니다.


저도 한번 적용 해봤는데요.

아래의 이미지 두개를 보시죠.


폰트다운, 무료폰트, 글꼴, 글꼴다운, 손글씨폰트, 예쁜폰트, 이쁜글씨체, 고딕체, 손글씨체, 나눔고딕, 웹폰트, 클라우드폰트

적용 전 폰트


폰트다운, 무료폰트, 글꼴, 글꼴다운, 손글씨폰트, 예쁜폰트, 이쁜글씨체, 고딕체, 손글씨체, 나눔고딕, 웹폰트, 클라우드폰트

적용 후의 폰트

폰트가 이쁘네요~!

그런데 한글은 폰트 변경이 되지 않은것을 볼 수 있습니다.


제가 선택한 폰트가 영문 폰트라서 한글에는 적용이 안된겁니다.

한글 폰트도 사용해봐야겠죠?

유료이지만 유료폰트 또한 한달에 10000PV까지 무료로 사용 할 수 있습니다!

10000PV가 넘어가더라도 돈을 내는게 아닌 기본 폰트로 돌아가기 때문에 걱정하실 필요는 없습니다.


PV란?

Page View의 약자로, 방문자들이 보는 페이지의 횟수만큼 카운트가 올라갑니다

10000번의 페이지 뷰를 말하는거죠.


어렵지 않으니 함께 따라해보세요!


폰트다운, 무료폰트, 글꼴, 글꼴다운, 손글씨폰트, 예쁜폰트, 이쁜글씨체, 고딕체, 손글씨체, 나눔고딕, 웹폰트, 클라우드폰트

먼저 메뉴에서 서비스 상품(http://typolink.co.kr/pricing)을 눌러 아래로 스크롤 하면 빨간 테두리처럼 무료로 제공한다는 말이 있습니다.

선택을 누릅니다.


폰트다운, 무료폰트, 글꼴, 글꼴다운, 손글씨폰트, 예쁜폰트, 이쁜글씨체, 고딕체, 손글씨체, 나눔고딕, 웹폰트, 클라우드폰트

창이 뜨면 아래로 내리면 이런 복잡한 공란들이 있는데요.

그냥 공란으로 두고 결제하기를 누르면 됩니다.

혹시 에러가 뜨시는 분은 무시하시고 다음으로 진행하시면 됩니다.


폰트다운, 무료폰트, 글꼴, 글꼴다운, 손글씨폰트, 예쁜폰트, 이쁜글씨체, 고딕체, 손글씨체, 나눔고딕, 웹폰트, 클라우드폰트

MY ACCOUNT를 눌러서 결제 관리에 가보시면 결제금액 0원으로 결제가 되어있죠?

이렇게 되어있다면 성공입니다.


무료폰트와 사용방법은 같으니 똑같은 방법으로 한글 폰트를 설정 한 후 사용하시면 됩니다.

저는 Rix 토이스토리라는 글꼴을 사용했어요!


캘리그라피, 켈리그라피, 타이포그라피, 워드프레스, 자바스크립트, 웹표준, css


이 글씨체 맘에 드네요! ㅋ

이렇게 타이포링크 웹 폰트에 대해 알아봤습니다!

어느 웹 사이트든 쉽게 적용 할 수 있고, 워드프레스나 티스토리처럼 설치형 블로그의 경우에도 쉽게 적용이 가능합니다!!

여러가지 이쁜 폰트로 자바스크립트와 CSS 압박이 적은 타이포그라피 웹 디자인을 해보시는건 어떨까요?


혹시라도 더 궁금한 점이 있으시면 아래의 링크를 들어가 보시거나,

타이포링크 FAQ : http://typolink.co.kr/support/faq

댓글에 궁금한 점을 남겨주시면 아는만큼 답변 해드릴겠습니다!