[SCC 9기] - Project TIL : 웹폰트 적용하기

스파르타에서는 구글 웹폰트(https://fonts.google.com/)만 배웠지만, 구글 웹폰트는 한글쪽은 종류가 많이 없어서 다른 폰트들을 찾고 있었다. 가능하면 웹폰트를 사용하고 싶어서 여러가지 찾아보다가 괜찮은 사이트를 발견했다.

 

눈누 웹폰트 : https://noonnu.cc/

상업적 이용 가능한 무료 한글 폰트 모음 사이트 눈누

이 사이트는 여러 업체에서 공개한 무료폰트들을 하나로 모아놓은 것 같은 사이트이다.

 

 

또한 각각의 폰트가 저작권의 어느 범위까지 사용가능한지도 간편하게 알려준다.

 

꽤 종류도 많고 사용법도 편리하다. 적용 방법은 다음과 같다.

 

<sytle> 태그에 아래와 같이 적용하고, (아래 내용은 각 폰트에 들어가보면 확인이 가능하다)

@font-face {
    font-family: 'TmoneyRoundWindRegular';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/TmoneyRoundWindRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

 

예를들어, body에 모두 적용되는 CSS 또는 내가 원하는 곳만 적용할 CSS 내용에 해당 font-family 이름을 명시한다.

body {
    margin: 0;
    padding: 0;
    position: relative;
    height: 100%;
    background: white;
    font-family: 'TmoneyRoundWindRegular';  // 바로 이 부분!
    font-weight: 300;
    font-size: 17px;
    color: #777;
}

그러면 해당 폰트가 잘 적용된 것을 확인할 수 있다.