티스토리 나눔스퀘어 웹폰트 설정하기(Regular/Bold/Extra Bold/Light)

직접 서버에서 웹폰트를 적용하는 방법

Link 방식이나 Import 방식이 아닌 직접 스타일시트(CSS)에 작성하고 웹폰트를 다운로드 후 티스토리 스킨편집 → 파일 업로드를 통해 웹폰트를 설정하는 방법이다. 매우 간단하고, 빠르고, 쉽다. 또한 티스토리에서 직접 웹폰트를 불러와서 뿌려주기 때문에 가장 빠르고 가볍다. 방법은 간단하다. 웹폰트를 다운로드 받고, 파일 업로드를 통해 웹폰트를 업로드한 후, 스킨편집에서 스타일시트(CSS)에 아래로 웹폰트 주소를 설정한다.

NanumSquare-master.zip

3.02MB

 

굵기별로 웹폰트를 지정할 때

그 다음, 적용하고자 하는 요소에 폰트패밀리를 나눔스퀘어(NanumSquare)로 지정하면 웹폰트 설정이 완료된다. 웹폰트의 굵기 설정은 font-weight로 지정하며, 400, 700, 800, 300으로 각각 지정할 수 있다.

@font-face {
 font-family: 'NanumSquare';
 font-weight: 400;
 src: url(./images/NanumSquareR.eot);
 src: url(./images/NanumSquareR.eot?#iefix) format('embedded-opentype'),
      url(./images/NanumSquareR.woff) format('woff'),
      url(./images/NanumSquareR.ttf) format('truetype');
}
@font-face {
 font-family: 'NanumSquare';
 font-weight: 700;
 src: url(./images/NanumSquareB.eot);
 src: url(./images/NanumSquareB.eot?#iefix) format('embedded-opentype'),
      url(./images/NanumSquareB.woff) format('woff'),
      url(./images/NanumSquareB.ttf) format('truetype');
}
@font-face {
 font-family: 'NanumSquare';
 font-weight: 800;
 src: url(./images/NanumSquareEB.eot);
 src: url(./images/NanumSquareEB.eot?#iefix) format('embedded-opentype'),
      url(./images/NanumSquareEB.woff) format('woff'),
      url(./images/NanumSquareEB.ttf) format('truetype');
}
@font-face {
 font-family: 'NanumSquare';
 font-weight: 300;
 src: url(./images/NanumSquareL.eot);
 src: url(./images/NanumSquareL.eot?#iefix) format('embedded-opentype'),
      url(./images/NanumSquareL.woff) format('woff'),
      url(./images/NanumSquareL.ttf) format('truetype');
}

 

• 나눔스퀘어 웹폰트 출처 및 다운로드 링크