티스토리 글씨체 바꾸기 - 리디바탕 from 눈누

눈누에서 상업적으로 이용할 수 있는 다양한 한글 폰트를 무료로 제공해주고 있다.

 

나는 리디 페이퍼로 주로 책을 읽다 보니 리디의 폰트에 익숙해졌는데,

마침 눈누에서 리디바탕 글씨체를 무료로 제공해 주고 있어서 바로 갖다 쓸 수 있었다.

(감사합니다 눈누!)

(눈누난나)

 

<방법>

1. 눈누사이트에 들어가면 아래와 같은 코드를 복사해 올 수 있다. 아래 예시는 리디바탕체이다. 

 

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

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

2. 티스토리 관리자모드에서 스킨 편집 -> CSS 편집에 들어간다.

 

(3-4번은 설명 읽고 아래 그림의 주황 박스 참조)

3. 맨 첫 번째 라인부터 @로 시작하는 코드들이 있는데, 그 아래에 위 코드를 그대로 붙여 넣는다. 

4. 그 아래 코드를 좀 더 살펴보면 'font-family'가 있는데, 여기에 'RIDIBatang'을 추가해준다.

 

5. 적용을 누르면 모든 글씨체가 리디바탕으로 바뀌어있는 것을 확인할 수 있다. 

 

6. 만약 특정 부분의 글꼴을 바꾸고 싶다면 그 특정 부분에 해당하는 코드를 CSS에서 찾아야 한다. 

나 같은 경우 리디바탕체가 본문 타이틀에서는 딱히 예쁘지 않길래 마포금빛나루로 바꾸었다.

현재 나의 스킨의 경우는. box_article_tit에 해당하는 부분에 가서 font-family:'MapoGoldenPier';  를 넣어주면 됐다.

 

6-1. 눈누에서 마포금빛나루 찾아서 웹폰트 복사 -> CSS에 붙여 넣기. 

6-2. 같은 창에서 ctrl+f (맥에선 cmd+f) 눌러서 box_article_tit를 찾아 font-family:'MapoGoldenPier';  를 넣어주면 된다.

7. 원하는 부분의 CSS 개체 쉽게 찾기

(어떤 분들은 header h1 a에 글꼴을 넣어주라는데, header h1는 통상 웹의 가장 큰 제목으로 블로그의 타이틀이라 할 수 있고,

나 같은 경우 Dance with gusto라는 타이틀이 바뀌게 되었다.

즉, 스킨마다 다르게 적용된다는 것이다.)

 

자신의 스킨에서 특정 부분의 CSS 위치를 찾으려면 크롬으로 블로그를 열고 해당 부분에 가서

마우스 우클릭 -> 검사를 하면 웹 오른쪽에 개발자 모드가 뜨는데, 좌하단부분 Styles라는 탭 안의 개체들을 살펴보면서 후보군들을 볼 수 있고, 스킨 편집 CSS모드로 가서 테스트해보시면 됩니다.