반응형
블로그나 웹사이트를 꾸밀 때 글꼴은 디자인적으로 큰 영향을 미칩니다. 그러한 글꼴 변경을 별도의 다운로드 없이 웹 폰트를 이용하여 쉽고 간단하게 글꼴을 적용시킬수 있습니다. 이 글에선 티스토리 북클럽 테마에 '구글 폰트'를 이용한 폰트 적용 방법을 설명합니다.
구글 폰트로 블로그에 웹 폰트 적용하기
구글 폰트는 구글에서 제공하는 무료 웹 폰트 사이트로 전세계적으로 널리 사용되고 있습니다. 약 1천 개의 무료 글꼴을 제공하며 다양한 언어의 폰트를 이용할 수 있습니다.
웹 폰트란?
폰트를 다운로드 받지 않고도 코드 입력만으로 폰트를 표시할 수 있게 하는 기법입니다.
구글 폰트 사용 방법
구글 폰트를 사용하려면 폰트를 고르고, html에서 웹폰트 코드를 작성하고, css에서 폰트를 적용할 태그를 지정해야합니다. 다음 과정을 순서대로 진행합니다.
- ① Preview : 직접 확인하고싶은 문장을 입력하여 폰트가 적용된 예시를 확인할 수 있습니다.
- ② Language : 글꼴 언어를 선택합니다. (한국어는 Language에서 'Korean'을 검색하여 선택합니다.)
- ③ 글꼴 검색 : 원하는 글꼴이 있다면 직접 검색합니다. 글꼴명은 영어로 입력합니다. ex) 나눔고딕 - Nanum Gothic
- 폰트의 디자인과 스크롤을 내려 폰트 크기와 굵기의 스타일 예시를 확인할 수 있습니다.
- 폰트를 골랐다면 'Get font'를 클릭합니다.
- 'Get embed code'를 클릭합니다.
- 'Web'의 <link>를 선택하여 Embed code in the <head> of your html 의 'Copy code'를 클릭하면 코드가 복사됩니다.
- 해당 코드를 티스토리 스킨 편집의 html에서 <head>의 <link rel="stylesheet" href="./style.css"> 윗쪽에 붙여넣기 합니다.
티스토리 북클럽 테마 글꼴 변경하기
html에 웹폰트 코드를 적용했다면 css에 글꼴을 지정해야합니다. 다음은 티스토리에서 인기 있는 테마인 북클럽 테마의 글꼴 변경 방법입니다. 본문의 글꼴을 변경하는 방법과 블로그 전체적인 글꼴을 변경하는 방법이 있습니다.
※먼저 북클럽 기본 테마 CSS 편집창에서 @import 앞에 //를 붙여 주석으로 표시되도록 합니다.
/* Web Font Load */
1) 본문 글꼴 변경하기
- html에 웹폰트 코드를 적용한 후에 CSS 편집창에서 'ctrl+f'를 눌러 '#article-view'를 검색합니다.
- '#article-view'의 'font-family' 맨 앞에 글꼴명을 추가한 후 적용합니다. (글꼴명은 구글 폰트의 CSS class 코드에서 font-family 부분을 참고합니다.)
- 글 본문의 글꼴이 변경됨을 확인할 수 있습니다.
2) 블로그 전체적인 글꼴 변경하기
- CSS 편집창에서 'ctrl+f'를 눌러 'body'를 검색합니다.
- 'body'의 'font-family' 맨 앞에 글꼴명을 추가한 후 적용합니다.
- 제목과 카테고리, 태그 등 모든 폰트가 변경됨을 확인할 수 있습니다.
반응형
