티스토리 블로그 꾸미기: 한글 웹폰트로 제목 스타일 바꾸기
티스토리 블로그의 이미지와 무드를 가장 쉽게 바꿀 수 있는 방법 중에 하나는 '폰트'를 바꾸는 것이다. 요즘에는 한글 폰트도 웹폰트로 많이 공유가 되고 있어서 매번 보던 '나눔'서체와 다른 다양한 폰트로 자신의 티스토리 블로그 또는 웹사이트의 분위기를 확 바꿀 수 있다.
한글 웹폰트를 기준으로 쉽게 폰트 소스를 가져올 수 있는 두 개의 사이트를 소개하면서 바꾸는 방법을 알려드리겠다.
- 구글 폰트
- 눈누
- 티스토리 폰트 바꾸기
구글 폰트 (https://fonts.google.com/)
구글 폰트의 가장 큰 장점은 다양한 언의 폰트들을 서칭할 수 있다는 것이다. 세세한 라이센스는 직접 확인을 해야하지만 웹폰트는 거의 무료로 사용할 수 있고 어느 나라에서 어떤 폰트를 많이 사용하는지, 선택한 폰트가 어떤 폰트와 잘 어울리는지, 포함하고 있는 언어는 무엇이 있는지 등 상세한 정보를 소개하고 있다. 또한, 다운받기 전 서체의 크기를 웹상에서 확인할 수 있고, 직접 예문을 작성하여 어떤 스타일의 폰트가 좋은지 한번에 확인할 수 있다는 점에서 이용하기도 편하다.
이전에는 영문 폰트가 대부분이었지만, 한글 폰트도 점점 늘어서 정교한 웹폰트를 이용할 수 있다.
구글 폰트에서 언어 선택 중 한국어를 고를 수 있다. 영문 폰트가 굉장히 많기 때문에 한글 폰트를 찾는다면 언어 선택부터하는 것이 편하다. 구글 폰트에서 한글 폰트는 현재 26개가 있다. (20.08.22기준)
원하는 한글 폰트를 클릭하면 위와 같은 화면이 나타난다. 나는 '송명체(Song Myung)'를 선택하였다. 웹폰트 코드를 얻기 위해서 화면 중간에 있는 'Select this style' 버튼을 클릭한다.
위 화면처럼 화면 오른쪽에서 코드를 복사할 수 있는 섹션이 나온다. 만약 나오지 않는 경우 가장 상단 오른쪽에 있는 대시보드 모양의 아이콘을 클릭하면 된다.
폰트 소스를 가져오는 방법은 두가지다.
첫번째는 <link> 소스를 그대로 복사한 후 html편집 화면에서 <head></head> 태그 사이에 넣고, CSS편집에서 폰트를 바꾸고 싶은 영역의 스타일 태그안에 'font-family'를 선택한 폰트명으로 수정하는 것이다.
<head>
<link href="https://fonts.googleapis.com/css2?family=Song+Myung&display=swap" rel="stylesheet">
</head>
두번째는 @import 소스에서 <style></style> 태그를 제외한 코드를 CSS 편집화면에 그대로 복사한 후, 폰트를 바꾸고 싶은 영역의 'font-family'를 바꾸는 것이다.
/*CSS 편집 화면*/
@import url('https://fonts.googleapis.com/css2?family=Song+Myung&display=swap');
'<link>'와 '@import' 중 한가지만 해도 폰트를 가져오는 것은 문제가 없으나 나는 혹시 모를 오류가 있을까봐 보통 두 가지를 다 가져오는 편이다. 둘의 차이는 불러오는 속도가 다르다는 것인데, @import 방식이 브라우저에서 폰트를 불러오는 시간이 느리다고 알려져있다.
티스토리 제목 글 폰트 바꾸기
나는 티스토리 스킨 중 'Portfolio'를 사용하고 있고, 본문글의 제목글 스타일을 바꿔보겠다. 위와 같이 먼저 웹폰트를 불러온 다음에 티스토리 블로그 CSS 편집 화면에서 '.area_view .article_header .title_post' 태그를 찾는다. (Ctrl + F) 그리고 font-family를 선택한 폰트 이름으로 바꾸어주면 된다.
/* // area_index_category */
.area_view .article_header .title_post {
display: block;
font-size: 40px;
font-weight: 200;
font-family: 'Song Myung'; /*여기를 수정하세요.*/
line-height: 1.5em;
}눈누 (https://noonnu.cc/)
눈누의 장점은 한국 사이트이며, 정말 다양한 한글 폰트의 웹폰트를 제공한다는 것이다. 한글 무료 폰트는 거의 다 제공하고 있지 않나 싶다. 폰트 라이센스는 항상 직접 확인을 하는 것이 좋지만, 눈누에서는 해당 폰트가 어떤 분야에서 사용이 가능한지 1차적으로 명시하고 있어서 유저 입장에서는 편하다. 다양한 만큼 완성도가 떨어지는 폰트들이 있다는 것은이 단점이다.
눈누 사이트에서 원하는 폰트를 선택하면 위와 같은 화면이 나타난다. 오른쪽에 바로 '웹폰트로 사용'할 수 있도록 소스 코드를 제공하고 있다. '복사하기' 버튼을 클릭해서 그대로 복사해온다.
티스토리 내 텍스트 영역 폰트 바꾸기
그다음 티스토리 블로그 CSS 편집화면에서 그대로 붙여넣고, 구글 폰트를 변경했던 방법처럼 바꾸고 싶은 폰트 영역에 font-family를 바꾸어주면 된다. 폰트를 바꿀 때 주의할 점은 font-family명을 함부로 바꿔서는 안된다는 점이다. @font-face에서 선언한 font-family명을 써야한다.
/* 폰트 불러오기 */
@font-face {
font-family: 'SangSangAnt';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_three@1.0/SangSangAnt.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* // area_index_category */
.area_view .article_header .title_post {
display: block;
font-size: 4em;
font-weight: 200;
font-family: 'SangSangAnt'; /*여기를 수정하세요.*/
line-height: 0.75em;
}폰트를 바꾸면서 폰트 사이즈(font-size)와 줄간격(line-height)도 폰트에 맞게 수정을 하였다. 나는 현재 메인 화면에 있는 리스트 제목글과 본문글의 제목 스타일을 '상상토끼 개미똥꾸멍체'로 변경한 상태다.
꼭 티스토리 블로그가 아니더라도 어떤 웹사이트를 만들 든 위와 같은 방식으로 폰트를 적용하면 된다~!
by.liis (life is like this)
'web tutorial > tistory blog' 카테고리의 다른 글
| 티스토리 블로그: Odyssey 스킨에서 SNS 버튼의 링크 오류 수정 (0) | 2022.06.09 |
|---|---|
| 티스토리 블로그: Odyssey 스킨에서 로고 이미지 크기 바꾸기 (0) | 2022.06.07 |
| 티스토리 블로그: 답글의 랜덤 프로필 이미지 바꾸기 (2) | 2021.01.14 |
| 티스토리 블로그: 스크롤하면 나타나는 메뉴바 만들기 (7) | 2020.10.10 |
| 티스토리 블로그: Portfolio 스킨 배경 고정하기 (13) | 2020.08.01 |
| 티스토리 블로그: '상단 메뉴바' 고정하기 (16) | 2020.06.03 |
| 티스토리 블로그: Poster 스킨에 로고 넣기 (4) | 2020.04.15 |
| 티스토리 블로그: '파비콘' 만들기 (0) | 2020.04.14 |