티스토리 스킨과 본문에 무료 웹폰트 적용하는 간단한 방법(눈누, 구글폰트)

티스토리 블로그 폰트(글씨체)를 자유자재로 바꿀 수 있는 다양한 웹폰트가 있습니다. 웹폰트란 웹페이지를 보는 사람의 컴퓨터에 특정 글꼴이 설치돼있지 않더라도 웹페이지 로딩과 동시에 글꼴이 받아져서 볼 수 있게 하는 폰트입니다. 지금 제 티스토리 블로그에서 보고 계신 이 글에 적용된 폰트도 웹폰트입니다. 폰트명은 넥슨 Lv.2 고딕으로, 무료로 이용가능토록 배포된 코드를 이용해서 아주 간단하게 적용한 것입니다.

 

무료 웹폰트를 티스토리에 적용하는 방법

무료 웹폰트를 티스토리에 적용하는 방법은 다음과 같습니다.

 

1. 무료 웹폰트를 제공하는 사이트에 접속하여 마음에 드는 폰트(글씨체)를 고릅니다. 무료 웹폰트를 제공하는 사이트는 눈누(noonnu.cc/) 또는 구글 폰트(fonts.google.com/)가 있습니다. 이 두 사이트 정도면 충분히 고퀄리티의 무료 글씨체를 고를 수 있을 것입니다.

저는 넥슨 Lv.2 고딕을 선택!

 

2. 폰트체를 선택하면 웹폰트 소스가 나오는데 이를 복사합니다. 아래 붉은색 부분이 복사할 부분입니다.

붉은색 박스 부분에서 노란색부분을 누르면 복사해야 할 소스가 전체 선택 됩니다.

 

3. 티스토리 스킨편집 화면에서 CSS 수정화면에 들어갑니다.

 

4. CSS 수정화면에서 상단의 적당한 곳에 붙여넣는다.(아무데나 붙여도 상관없지만 상단에 붙여넣는게 어떤 웹폰트를 블로그에서 사용할 수 있는지 확인하기 쉬우므로 저는 보통 상단에 붙여넣습니다.) 여기까지 하면 이제 웹폰트가 내 블로그에 설치된 것입니다. 이제 블로그의 어느 부분에(제목, 본문, 메뉴 등등) 이 폰트를 적용할지 설정해주어야 합니다.

@font-face {
    font-family: 'NEXON Lv2 Gothic';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

 

5. 마우스 커서를 CSS 수정화면에서 찍고, Ctrl + F 를 누른 후 font-family를 검색합니다.

 

6. font-family 부분에 모두 font-family: 'NEXON Lv2 Gothic' ; 와 같이 기존에 적용돼있는 폰트이름을 새로운 폰트명으로 수정해줍니다.

body {
  font-family:'NEXON Lv2 Gothic';
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

 

제 블로그에 넥슨 Lv.2 고딕체를 적용한 CSS 편집 부분입니다. 이런 식으로 원하는 폰트 소스를 긁어와 붙여넣기만 하면 됩니다.

참 쉽죠잉?^^

 

웹폰트를 무료로 제공하는 사이트

복잡하게 폰트를 다운받아 블로그에 업로드해서 적용할 필요 없이, 소스만 블로그에 입력해놓으면 곧바로 티스토리 블로그에 적용할 수 있게 웹폰트를 무료로 제공하는 사이트입니다. 눈누라는 사이트와 구글폰트입니다. 이 중 특히 눈누가 여러 제작사들이 무료로 배포한 한글폰트만 모아놓은 사이트로 더 추천합니다. 2021년 5월 현재 기준 무료 한글폰트가 무려 591개가 있습니다. 추천 폰트 메뉴와 모든 폰트 메뉴 중 추천 폰트 메뉴에서만 골라도 다양한 선택지가 있습니다.

 

1. 눈누(noonnu.cc/)

다양한 한글 폰트 중에서 고르고 싶다면 눈누 폰트에서 고르시는 것을 추천합니다. 무려 591개의 무료 웹폰트를 모아놓아 블로그를 더욱 내 입맛에 맞게 꾸밀 수 있습니다.

눈누 폰트(noonnu.cc)

 

2. 구글 폰트(fonts.google.com/)

영문 웹폰트까지 고르고 싶다면 구글 폰트도 이용하시면 좋습니다. 웹폰트 소스를 가져와서 CSS에 추가해주시면 됩니다.

font.google.com