웹나눔스퀘어폰트올바르게 사용하기

웹나눔스퀘어폰트올바르게 사용하기

웹상에서 나눔스퀘어(NanumSquare)을 올바르게 사용하는 방법에 대해 알아보도록 하겠습니다.  많이 알려진 나눔스퀘어 폰트는 상업적, 비상업적으로 모두 사용이 가능합니다. 관련내용은 여기를 클릭하여 라이센스를 확인하시기 바랍니다.

※ 주의사항 나눔스퀘어는 한글로 사용시에 편안함을 느낄수 있는 가독성 높은 폰트임은 틀림없으나, 16px 이하 크로 사용시에는 폰트깨짐이 발생합니다.

그래서, 일반적으로 웹폰트를 사용시에는 Google Fonts 에서 제공하는 한국어 폰트를 추천합니다. 관련링크는 여기에서 확인이 가능합니다.

웹 나눔스퀘어 폰트를 사용시에는 17px 이상을 사용하는것을 권장하며, 이보다 작은 폰트를 사용시에는 Google Fonts에서 제공하는 한국어폰트를 사용하는것을 권장합니다. 서두가 길었습니다만, 이제 웹나눔스퀘어 폰트를 CSS Style Sheet를 통해 사용하는 방법을 알아보도록 하겠습니다.

/* CSS스타일시트상에 적용방법 아래 두가지중 하나를 선택하여 사용하면 됩니다.  */

@import url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);
@import url(https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css);



.선택자{
font-famliy:'NanumSquare',san-serif;
font-size:17px;
line-height:1.5;
}

/* -또는 아래와 같은 적용이 가능합니다.- */

body{
font-famliy:'NanumSquare',san-serif;
font-size:17px;
line-height:1.5;
}

/* 위처럼 적용시 body에 속해 있는 모든 폰트가 나눔스퀘어로 적용됨을 알수 있습니다.*/

이와 같이 벅용했을때는 가장 깔금하게 표현되는것을 확인할수 있으며, 나눔스퀘어 웹폰트는 4가지 굵기를 제공하고 있어 폰트 굵기는 아래와 같이 정의 할 수 있습니다.

• Light
  font-weight:300;
• Regular
  font-weight:400;
• Bold
  font-weight:700;
• Extra Bold
  font-weight:800;

Html 파일상에 추가하는 방법인 link방식은 아래와 같습니다.

/* 아래두개의 링크중 하나를 선택하여 사용하여도 무방합니다.*/
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css">

<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css">

.nanumsquare {
    font-family: 'NanumSquare', sans-serif !important;
}