안녕하세요 NeoDahl님 :-)

Gotham 웹폰트 질문에 답변 드립니다.결과만으로 보자면 사용하신 폰트 또는 그 외 기타 문제가 있지 않나 싶습니다. 제가 작성한 글을 읽고 직접 테스트 해보세요. 결과를 먼저 보려면 Gotham 웹폰트 적용 링크를 통해 살펴보세요.

HTML 구조화

먼저 HTML 마크업은 다음과 같이 작성합니다.

<p class="gotham is-book">Gotham Book Text</p>
<p class="gotham is-light">Gotham Light Text</p>

Gotham 웹폰트 정의

웹폰트 포멧(woff, eot, ttf, svg 등) URL을 준비한 후, 웹폰트를 정의합니다. (Gotham 웹폰트 파일 출처)

/* Gotham 웹폰트 정의 
 *
 * 출처: 실제 폰트의 URL은 아래 주소에서 호스팅 됨.
 * https://rawgit.com/ApplicationCraft/applicationcraft.com/master/source/fonts/{폰트파일}
 * 
 * ---------------------------------------------------------------------------- */

@font-face {
    font-family: "y9 Gotham";
    src: font-url("gotham-book-webfont.eot");
    src: font-url("gotham-book-webfont.eot?#iefix") format("embedded-opentype"),
         font-url("gotham-book-webfont.woff") format("woff"),
         font-url("gotham-book-webfont.ttf") format("truetype"),
         font-url("gotham-book-webfont.svg#gotham_bookregular") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "y9 Gotham";
    src: font-url("gotham-light-webfont.eot");
    src: font-url("gotham-light-webfont.eot?#iefix") format("embedded-opentype"),
         font-url("gotham-light-webfont.woff") format("woff"),
         font-url("gotham-light-webfont.ttf") format("truetype"),
         font-url("gotham-light-webfont.svg#gotham_lightregular") format("svg");
    font-weight: 300;
    font-style: normal;
}

Gotham 웹폰트를 사용하는 클래스 정의

.gotham.is-book, .gotham.is-light 클래스를 각각 정의한 후, 두께(weight)를 다르게 설정합니다.

.gotham {
  font-family: "y9 Gotham";
  font-size: 50px;
}

.gotham.is-book {
  font-weight: normal;
}

.gotham.is-light {
  font-weight: 300;
}

결과

코드를 반영한 결과는 다음과 같습니다. 결과에서 보여지는 것처럼 동일한 font-family 이름을 사용하고도, font-weight 값에 따라 글자가 다르게 보입니다. :-) 코드 실행 결과는 Gotham 웹폰트 적용에서 살펴보세요.

참고자료

• 웹 글꼴 최적화
• same font-family name multiple times

FIN.