Typolink Logo

Getting Started ;)

타이포링크의 서비스를 이용하는 방법은 어렵지 않습니다.
간단한 몇 가지 절차를 통해 타이포링크를 이용할 수 있습니다.

본 서비스를 100% 이용하기 위해서는

지금 가입하기
  • 상품신청
  • 폰트검색
  • 코드적용
  • 도메인등록

상품 선택하기

'서비스 상품' 메뉴를 선택하면 신청하실 수 있는
상품목록을 확인할 수 있습니다. 웹폰트를 적용할 사이트의
'월PV'를 미리 확인하신 후 적합한 상품을 선택합니다.
'Free' 상품 이용시에도 동일한 절차로 신청해야 하지만
결제는 진행되지 않습니다.

상품정보 입력하기

신청하실 상품에 대한 '결제기간'을 선택합니다.
결제기간에 따라 할인률이 차등적으로 적용됩니다.
결제기간을 선택하면 총 결제액이 자동으로 계산되며
모든 비용은 VAT포함 가격으로 표시됩니다.
상품선택과 함께 신청자의 추가정보를 입력합니다.

결제방식 선택하기

타이포링크는 '신용카드','실시간 계좌이체','무통장입금'의
결제방식을 제공하고 있습니다.
현재 '신용카드'의 경우 30만원, '실시간 계좌이체'의 경우
200만원까지의 결제한도가 있어서 총 결제금액이 정해진 한도를
넘을 경우 해당 결제방식은 선택이 불가능합니다.

결제방식을 선택하고 '결제하기' 버튼을 누르시면
결제가 진행됩니다.

폰트 찾기

'폰트 둘러보기'의 폰트패밀리 목록 중에
원하는 폰트를 찾습니다. 페이지 오른쪽의 검색조건을 이용하면
더욱 빠르게 폰트를 찾을 수 있습니다.
검색조건은 원하는 폰트의 '타입'와 '제작사'를 선택하여
검색하거나 폰트명을 직접 입력하여 검색할 수 있습니다.

폰트패밀리 상세보기

리스트에서 폰트패밀리를 클릭하면 폰트패밀리 정보와
해당 폰트패밀리에 속해있는 폰트목록을 확인할 수 있습니다.
일반적으로 폰트패밀리에 속해있는 폰트는 동일한 타입에
굵기의 차이를 가지고 있습니다. '샘플보기' 탭에서는
각 폰트들을 직접 테스트해 볼 수 있습니다.

선택한 폰트의 코드생성

폰트를 선택했다면 '웹폰트적용'탭을 선택합니다.
먼저 사용할 폰트를 선택하고 필요한 문자조합을 선택하면 자동으로
'웹폰트 링크 태그'가 생성됩니다. 생성된 태그를
생성된 코드를 복사해서 웹폰트를 적용할 웹페이지에 적용합니다.
그리고 적용된 웹폰트를 CSS에 추가합니다.

웹폰트를 호출할 link Tag 추가

타이포링크의 웹폰트를 호출하는 <link> Tag를 <head>~</head> Tag의 사이에 붙여넣습니다.
<link> Tag는 모든 <script> Tag 전에 넣어야만 합니다.
그렇지 않으면 Internet Explorer에서 웹폰트가 모두 다운로드 되기 전까지어떠한 텍스트도 표시되지 않습니다.

한 개의 폰트 사용시
'폰트명'에 사용할 폰트명을 지정함으로써 원하는 폰트를 가져올 수 있습니다.
<link rel="stylesheet" type="text/css" href="http://api.typolink.co.kr/css?family=폰트+이름" />
여러 개의 폰트 사용시
여러 개의 폰트를 사용할 경우에는 폰트명과 폰트명 사이를 '|(파이프)'으로 구분하여 사용합니다.
<link rel="stylesheet" type="text/css" href="http://api.typolink.co.kr/css?family=폰트+이름|폰트+이름" />
많은 폰트를 사용할 경우 웹사이트의 로딩속도가 저하될 수 있으므로 사용하지 않는 폰트는 <link> Tag 에서 꼭 제거하고 3개 이하의 폰트를 사용할 것을 권장합니다.
올바른 사용예 <link rel="stylesheet" type="text/css" href="http://api.typolink.co.kr/css?family=RixSGo+L|RixSGo+M" />
잘못된 사용예 <link rel="stylesheet" type="text/css" href="http://api.typolink.co.kr/css?family=RixSGo+L" />
<link rel="stylesheet" type="text/css" href="http://api.typolink.co.kr/css?family=RixSGo+M" />

CSS Style에 폰트를 정의

CSS style에 사용될 웹폰트를 정의합니다. 방식은 기존의 font-family를 정의하던 형태와 동일하게 작성하시면 됩니다.
CSS style에 사용되는 폰트명의 규칙은 <link> Tag에 사용된 폰트명의 (+)대신 (space)를 적용합니다.

<style type="text/css">
    p {
        font-family: "폰트 이름";
        font-size: 12px;
    }
</style>

도메인 등록하기

my account의 '도메인관리'를 선택합니다.
그리고 '도메인등록'에 등록할 웹사이트의 도메인정보를 등록합니다.
도메인이 정확히 등록되어야 해당 사이트에 웹폰트가 적용이 되므로
'도메인 적용예시'를 참고하여 작성하도록 합니다.
도메인이 등록되면 하단의 '등록된 도메인정보'에서 확인 및 삭제가 가능합니다.