[Font]구글 폰트, 눈누에서 웹 폰트 받아오는 법

웹에 기본 폰트가 아닌 새로운 폰트를 적용하는 방법으로는 여러가지가 있다. 

 

1. 웹 폰트는 주로 WOFF 파일을 쓴다. 즉, 우리가 보통 여러 용도로 다운받아 쓰는 폰트들은 OTF나 TTF파일이기 때문에, 이 파일을 올리면 제대로 적용되지 않는 오류가 발생한다. 검색해보면 TTF파일을 WOFF파일로 바꿔주는 사이트들도 존재한다. 그러나 가끔 변환 중에 파일이 깨지기도 하고 저작권을 일일이 알아봐야 해서 조금 곤란하다(폰트는 유독 저작권에 민감하니, 조심.). 프로젝트에서 반드시 써야 하는 특별한 폰트가 있지 않는 한 피해야 할 방식이라고...

 

2. 그래서, 이럴 때에 알아둬야 하는 페이지가 두 개 있다. 구글에서 제공하는 구글 폰트 https://fonts.google.com/ , 그리고 한국 폰트가 굉장히 다양하게 올라오는 눈누 https://noonnu.cc/ 다. 

 

구글 폰트

구글 폰트 https://fonts.google.com/ 에서는 Noto 시리즈를 통해 많은 언어들을 웹에서 사용할 수 있게 제공한다. 특히 Noto Sans Korean이 보기 무난해서 자주 쓴다고. 여담이지만, 한글 폰트는 영어에 비해 만드는 데에 손이 굉장히 많이 가기 때문에(보라! 가의 ㄱ와 각의 아래쪽에 ㄱ이 모양이 다 다른 것을... 일일이 다 만들어야 한다. 영어는 확실히 이런 면에서 편리하다. 공들여 한글 폰트 만들어주시는 분들에게 존경을.), 지원되는 한글 폰트는 다양하지 않은 것 같다. 열 종류 정도 되던가? 검색할 때 Korean으로 바꿔보면 뜬다. 하지만 폰트 굵기를 100부터 900까지 광범위하게 지원한다는 장점이 있다. 눈누에서는 굵기를 다양하게 제공하지는 않아서.........(손이 많이 가니까...)

 

적용 방법은 쉽다. 원하는 폰트를 굵기 별로 +를 클릭해서 오른쪽에 다 옮겨담고, <link>에 있는 코드를 싹 긁어 html창 Head에 넣어준다. 그 다음 연결된 Css파일에는 font-family를 적용하면서 아래쪽 Css rules to specify familes에 있는 작은 따옴표 속 폰트명을 넣어주면 된다.

 

body에 한/영 각각 다른 두 가지 폰트를 적용할 생각이라면 Css에 넣는 건 아래와 같은 모양이 된다. Philosopher이 영문 폰트이기 때문에 앞에 넣어줬다. 

body {font-family:"Philosopher", "Noto Serif KR";}

그리고 아래와 같은 부분을 긁어서(위에 말했듯이, 구글폰트 페이지 우측에 그대로 뜬다!) html의 head내부에 쇽 넣어주면 된다.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;400;700&family=Philosopher:wght@400;700&display=swap" rel="stylesheet">

이러면 한글은 Noto Serif KR이 적용되고 영어는 Philosopher로 나오게 된다. 왜 한글과 영어가 다르게 적용되어 뜨는지는 맨 아래 항목을 참조할 것.

 

 

눈누

눈누https://noonnu.cc/ 는 한국 폰트들이 그야말로 넘쳐 흐르는 보물 창고라고 할 수 있다. 다만 위에 설명한 이유 때문에 독특한 폰트들은 굵기가 다양하지 않다. 그럼에도 꽤 많은 폰트들이 제공되고 있기 때문에 한번씩은 살펴보면 좋다. 특히 저작권을 어렵지 않게 잘 명시해주고 있어 그런 면에서 도움이 된다. 대부분 아마 상업적 이용 허용인 것 같은데, 그래도 꼼꼼히 확인하길. 잊지 말자, 저작권! 잘못 걸리면 큰일난다!

 

눈누는 구글 폰트랑은 방법이 조금 다르지만, 적용은 역시 어렵지 않다. 우선 원하는 폰트에 들어가서 우측에 있는 '웹폰트로 사용' 란에 있는 코드를 싹 복사한다. @font-face로 시작하는 그거 맞다. 그걸 html과 연결된 css페이지(보기에는 맨 위가 좋겠다.)에 넣어주고, 구체적으로 적용하고 싶은 곳에 font-family:"폰트명(아까 복사한 그 코드 안에 있다)"; 으로 넣어주면 바로 적용된다. 아주 쉽다.

 

 

• Css창에 웹 폰트를 적용할 때 주의 해야 할 점은, font-family: 옆에 ""로 폰트를 집어넣는 순서다. 한글폰트들은 대개 영어도 함께 제공하는데, 이때 "한글폰트이름", "영어폰트이름" 순서로 나열하게 되면 영어 폰트는 다른 폰트로 쓰고 싶어도 한글 폰트로 떠버리는 사태가 발생한다. 무조건 "영어폰트이름", "한글폰트이름" 순서 유지할 것. 그래야 영어 폰트 내에 한글 폰트가 없으니,뒤에 오는 폰트로 한글을 처리해주면서 웹페이지 내 영/한을 각각 다른 폰트로 보여줄 수 있다. 폰트는 따옴표 안에 있는 맨 앞부터 차차 읽어내려간다. 잊지 말기.
• 그래서 보통 특별한 웹폰트를 쓸 때에는 인터넷이 연결되지 않거나 폰트가 적용되지 않는 경우를 고려해서 모든 컴퓨터에 있는 "돋움" 같은 걸 font-family 맨 마지막에라도 넣어준다.