[Daily] 무료 폰트 다운 받기 + 웹(html)에 바로 적용 본문

Daily

[Daily] 무료 폰트 다운 받기 + 웹(html)에 바로 적용

디유비 2020. 2. 14. 00:22

https://noonnu.cc/

티스토리 블로그의 장점은 html을 사용자 취향에 맞게 마음대로 수정할 수 있다는 장점이 있다.

 

심플하기만 한 내 블로그에 약간의 포인트를 주고자 타이틀의 폰트를 변경해 보기로 했다.

 

근데 이 폰트라는 것은 저작권이 있기 때문에 돈을 주고 다운을 받거나 무료 폰트를 이용해야 한다. 보통 구글 폰트에서 무료 폰트를 받을 수도 있지만 여기는 한국어 폰트가 다양하게 있지 않다. 

 

Google Fonts

Making the web more beautiful, fast, and open through great typography

fonts.google.com

그래서 여기저기 검색하다가 " 눈누 "라는 한국어 무료 폰트를 다운 받을 수 있는 곳을 발견했다.

 

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

상업적으로 이용할 수 있는 무료 한글 폰트를 모아 놓은 사이트 눈누

noonnu.cc

눈누에서 마음에 드는 폰트를 발견했을 때 블로그에 어떻게 적용 할 수 있을까? ?

 

우선 위에 있는 눈누 사이트에 접속해서 마음에 드는 폰트를 찾고 폰트 이름을 클릭한다.

 

폰트 이름을 클릭하면 이렇게 어디에서 제작했는지와 다운로드를 받거나 웹에 바로 적용할 수 있는 웹폰트로 사용하기가 나온다. 

우리는 웹폰트로 사용하기 위해 코드 복사하기를 누른다.

티스토리 블로그 관리로 들어가서 스킨 편집을 누른다.

스킨 편집에서 html 편집하기를 누른다.

CSS를 눌러서 복사한 코드를 맨 위에 붙여 넣기 해준다.

내가 수정하고자 하는 클래스명은 sidebar이기 때문에 Cntl + F를 눌러서 sidebar를 검색한다.

sidebar 클래스 아래 서브 클래스인 .titlefont에 복사한 font-family를 추가해주면 CSS수정은 끝이다.

HTML 수정을 하기 위해 HTML을 누르고 한 줄로 작성되어 있던 블로그 타이틀에 div를 이용해서 css에 수정한 것과 같은 클래스명을 지정해 준다. 나는 titlefont라고 주었다. 이렇게 하면 모든 작업은 끝이 났다. 적용을 눌러준다.

 

이렇게 변경 전과 후에 폰트 변화를 확인할 수 있다. 

 

Comments