[CSS][웹 폰트] google font, 눈누 적용하기

웹폰트

 웹에서 폰트를 적용하기 위해서는 크게 두가지 방법이 있다. TTF, OTF파일과 같은 폰트 파일을 다운받은 뒤 서버에 저장을 시키고, 이 파일을 불러와서 적용하는 방식과 다운받는 것 없이 url을 이용해서 웹 폰트를 적용하는 방식이다. 이 두가지 방법 중에서 두번째 방법인 웹 폰트를 적용하는 방법에 대해서 알아보자.

---

 웹 폰트 종류

 가장 많이 사용하는 웹 폰트에는 구글 폰트와 눈누가 있다. 구글 폰트에는 영어, 한국어 모두 있고, 눈누에는 한국어 폰트가 주로 있다. 이 웹사이트에 가보면 많은 폰트가 있으니 만드는 웹사이트에 어울리는 폰트를 골라서 사용하면 된다.

 

구글 폰트 적용하기

Google Fonts

구글 폰트 웹사이트 상단에 이름으로 폰트를 검색할 수 있고, 언어, 카테고리, properties들을 설정할 수 있다. 그렇게 해서 원하느 폰트를 찾아서 들어가면 된다.

원하는 폰트로 들어가면 font weight에 따른 글들이 나오는데 쓰고싶은 weight의 옆에 + Select this style을 누르면 된다. 꼭 한개가 아니더라도 여러 weight, 여러 폰트들에서 버튼을 눌러도 한번에 적용을 할 수 있다. 그 후에 구글폰트 오른쪽 상단에 있는 아이콘을 클릭하면 된다.

아이콘을 클릭하면 오른쪽에서 웹 폰트로 쓸 수 있는 코드가 나올 것이다. html에 적용시키기 위해서는 <link>를 보면 되고, 이번에는 CSS에 적용을 시키기 위해서는 @import의 코드를 복사해서 붙이면 된다.

CSS 가장 위에 @import 로 된 부분을 붙이고 폰트를 적용하고 싶은 부분에 font-family에서 import한 폰트를 적용하면 된다. 웹사이트 전체에 노토산스 폰트를 적용하는 경우 아래와 같은 코드를 사용하면 된다.

* {
	font-family: 'Noto Sans KR', sans-serif;
}

 

눈누 폰트 적용하기

눈누 - 상업용 무료한글폰트 사이트

 눈누에서도 구글 폰트와 같이 폰트를 검색하고 볼 수 있다. 

이 중에서 마음에 드는 폰트를 선택하면 아래와 같이 폰트를 미리볼 수 있는 공간과 웹 폰트로 사용하는 코드, 다운로드 링크가 있다. 폰트를 다운받아서 사용하고 싶으면 다운로드 링크에 들어가서 ttf나 otf와 같은 파일을 다운받아서 설정하면 된다. 

웹 폰트로 적용하기 위해서는 @font-face부분을 복사하여서 CSS가장 위에 붙여넣어 준다. 그리고 사용하고 싶은 부분에 font-family를 font-face에 설정된 이름을 사용하면 된다. 전체에 해당 폰트를 사용하는 경우면 아래와 같은 코드를 적용하면 된다.

@font-face {
    font-family: 'SF_HambakSnow';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2106@1.1/SF_HambakSnow.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

* {
	font-family: 'SF_HambakSnow';
}