티스토리 블로그 전체 폰트 변경 (구글 폰트 CDN)

2021. 11. 2. 20:04Life Hacks/Tistory

728x90
반응형

티스토리 포트폴리오 스킨에 기본으로 적용된 폰트는 예쁘지도 않고, 글자 가장자리가 매끄럽지 않아 가독성이 좋지도 않았다. 그래서 구글 폰트에서 자유롭게 사용할 수 있는 폰트를 골라 적용해보았다.

이번 포스팅은 티스토리 타이틀, 메뉴, 카테고리, 글 제목, 글 본문에 한 가지 폰트를 일괄 적용하는 방법이다.

 

 

1. 구글 폰트에서 적용하고 싶은 폰트를 고른다.

 

Google Fonts

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

fonts.google.com

 

 

2. 'Noto Serif Korean'을 적용하려고 한다. 폰트를 클릭하여 아래로 스크롤하면, 해당 폰트에 여러 가지 굵기 스타일이 있는 것을 확인할 수 있다. 원하는 굵기 스타일의 오른쪽에 '+ Select this style'을 클릭한다. 이왕이면 모든 굵기를 선택하는 것이 좋다. 티스토리 블로그에는 타이틀, 글 제목, 글 본문 등 다른 굵기가 설정되어 있는데, 만약 한 가지만 담으면, 담은 굵기로만 적용되어, 굵게(Bold)여도 티가 안 난다.

반응형

티스토리 블로그 전체 폰트 변경 (구글 폰트)

 

 

3. 오른쪽에서 선택한 폰트를 확인할 수 있다.

티스토리 블로그 전체 폰트 변경 (구글 폰트)

 

 

4. 오른쪽 아래 창의 <link> 코드를 복사한다. 여러 폰트를 선택하면, Selected families에 장바구니처럼 담겨 코드도 하나로 생성이 되니, 한 번만 붙여 넣어도 된다.

티스토리 블로그 전체 폰트 변경 (구글 폰트)

 

 

5. 티스토리 - 설정 - 스킨 HTML 편집의 HTML의 <head>와 </head> 사이에 복사한 코드를 붙여 넣는다. </head> 위에 넣어주었다. 나는 여러 가지 폰트와 언어를 선택해서 코드가 길다. 

티스토리 블로그 전체 폰트 변경 (구글 폰트) HTML

 

 

6. <link> 코드 아래에 CSS font-family를 확인한다. 'Noto Serif KR', 을 복사한다. (,) 쉼표까지 복사하자. 

티스토리 블로그 전체 폰트 변경 (구글 폰트)

 

 

7. 스킨 HTML 편집의 CSS에서 Control+F로 font-family를 찾는다. body { font-family : 에 복사한 'Noto Serif KR', 을 가장 앞에 넣어준다. 여러 폰트를 적용하려면, 6. 에 나열된 폰트를 모두 일일이 그 뒤로 붙여 넣어주면 되는데, 전체 적용할 폰트가 가장 앞이어야 한다.

티스토리 블로그 전체 폰트 변경 (구글 폰트) CSS

 

 

8. '적용'하면 티스토리 전체적인 폰트가 'Noto Serif KR'로 바뀐다. 

 

 

728x90
반응형