[CSS] 티스토리 북클럽(Book Club) 수정하기(1) - 폰트 설치

HTML, CSS 이런 거 하나도 모르는 '완전 초보자'입니다. 

티스토리 블로그 개설 후, 제가 이 페이지를 어떤 식으로 꾸몄는지를 하나씩 설명하려고 해요.

개념보다는 실용 위주로! 뒤죽박죽 구글링한 내용을 하나씩 정리해보려 합니다.

(*지금 사용 중인 <북클럽(Book Club)> 스킨이 기준입니다.

스킨 종류에 따라 CSS 문법이 조금씩 다르다고 하더라고요. 참고하세요.)

 

저는 CSS로 웹폰트를 설치했어요. 방법을 설명해드릴게요. 

 

웹폰트 설치하는 방법

1. 먼저 설치를 원하는 웹폰트를 준비합니다. 

 

'상업용 무료 웹폰트' 검색했는데, '눈누'(noonnu.cc/)라는 사이트를 제일 많이 쓰더라고요. 

(저도 이 사이트 이용해서,  '에스코어드림R', '에스코어드림Lt', '경기바탕체' 설치했습니다.)

아래는 예시로 '눈누' 사이트에서 하나를 골라 캡쳐했어요.  

[웹폰트로 사용] 아래 값 전체를 복사하세요. 우측 '복사하기' 버튼 누르시면 편합니다.

 

 

2. 티스토리 블로그 관리자 모드로 들어갑니다.

 

[티스토리 블로그 관리] → [꾸미기] → [스킨편집] 으로 가서, 우측 상단에 있는 [html 편집] 버튼을 누릅니다. 

 

 

3. 설치합니다. 

 

3-1. [HTML] , [CSS] , [파일 업로드] 이렇게 세 부분이 있습니다. 그 중 [CSS]를 클릭합니다. 그리고 제일 위 칸에 복사한 웹폰트를 붙여넣습니다. (보기 편하시라고 다른 값을 전부 뒤로 밀어둔 겁니다.) 아직 끝이 아닙니다! 

 

3-2. 복사한 부분 중 세 번째 줄, url 뒷부분 주소(https://...3Lihgt.woff)를 복사한 뒤, 인터넷에 붙여넣고 이동하시면 폰트가 다운로드 됩니다. 

 

3-3. 다운로드가 완료되면, [파일 업로드]를 클릭합니다. [+추가] 클릭하셔서 다운로드 받은 파일을 업로드합니다. 

 

설치가 완료되었습니다!!!

 

구글 웹폰트 설치하는 방법

구글 웹폰트는 훨씬 간단합니다. 

 

1. 먼저 구글 웹폰트 사이트(fonts.google.com/)에 접속합니다.

 

원하는 폰트를 선택 → 원하는 굵기(스타일)를 선택

그러면 오른쪽에 [선택한 가족]이라는 창이 뜹니다.

아래에서 [@수입]을 클릭 후, 값을 복사합니다. 

(*[패밀리를 지정하는 CSS 규칙]은 설치한 폰트를 실제로 적용할 때 사용하는 값입니다. 설치한 폰트를 적용하는 방법은 이어서 업로드하겠습니다. 여기선 설치하는 방법만 적어둘게요.)

 

 

2. 티스토리 블로그 관리자 모드로 들어갑니다.

 

[티스토리 블로그 관리] → [꾸미기] → [스킨편집] 으로 가서, 우측 상단에 있는 [html 편집] 버튼을 누릅니다. 

[CSS]를 누르셔서,  /* Web Font Load */ 부분 이미 설치된 폰트 다음에 복사한 값을 이어서 붙여넣습니다. 

 

설치가 완료되었습니다!!!

 

*설치한 폰트를 적용하는 방법은 이어서 업로드하겠습니다.