티스토리 반응형 스킨 #2 폰트 변경의 모든 것, PC와 모바일 전부 폰트 변경하는 법!

반응형 스킨 #2만 그런걸까?

아무리 구글링으로 찾아 티스토리 폰트를 바꿔도 새 폰트가 pc 환경에만 적용이 될 뿐 모바일 환경에는 적용이 되지를 않는다.

내가 정작 바꾸고 싶은 폰트는 pc가 아닌 모바일 환경에서의 폰트인데! 왜! 구글링을 해도 나오질 않니! 반응형 스킨 #2 사용자가 그렇게 적나! 아니면 내 구글링 실력이 똥인가!

그러나 집념 끝에 찾았다. 찾아냈다. 찾아내고야 말았다으아아아아ㅏㅏㅏㅏㅏ

(사실 예전에 찾았는데 귀찮아서 포스팅은 이제 함 ㅎ)

문제는 본문 폰트와 모바일 폰트가 별개인 것에 있었다.

덕택에 css (스킨 편집 - html편집 - css탭) 에서 따로따로 찾아서 수정을 해 줘야 하더라.

css를 보다보면 중반부부터 @media로 시작하는 부분이 몇 군데 있다. 그 부분은 휴대용 기기 쪽 스킨 수정 쪽이라 pc쪽 스킨과 개별로 돌아가는 모양이다.

그래서 우리는 저 @media를 건들여야한다.

그런데, 좀 많이 건들여야한다.

기껏 모바일 쪽 폰트 부분을 찾아서 폰트를 바꿨더니만, 바뀐 폰트가 본문에만 적용이 되더라. 본문에만...

진짜 본문만 바뀌고 글의 제목이랑 카테고리 등등. 곳곳의 폰트는 그대로다. 진짜 대환장파티.

아니이, 전체 폰트 한 군데 바꾸면 됐지이, 무슨 하나하나 다 찾아서 폰트를 바꿔줘야하냐아아ㅏㅏㅏ.

일괄로 딱! 바뀌고! 원하는 부분은! 개인이 찾아내서! 바꿀 수 있게 하면! 되잖아!

폰트를 변경하는 제일 간단한 방법은

css에서 Ctrl+F를 누른 다음 font-family를 검색해서 나오는 모든 부분의 폰트를, 적용하고 싶은 폰트로 일괄 수정 때려버리면 된다.

(이건 단순무식한 방법이고 이 포스팅에 특정 부분만 바꿔도 되는 부분도 하단에 후술해두었다.)

참고로 이 작업은 크롬에서 하는 게 편하다. 웨일 브라우저에서 했더니만 Ctrl+F로 font-family를 검색했을 때, 어디어디에 font-family가 위치했는지 보기가 쉽지 않았다. 크롬은 font-family의 위치가 스크롤바에 노란색으로 표시가 된다.

하, 이걸 왜 늦게 깨달아가지곤. 일찍 깨달았으면 구글링 삽질 안 해도 됐는데. 나란 바보.

물론 이 방법은 나처럼 쓰잘데기없이 부분부분마다 폰트를 세세하게 커스터마이징하고 싶은 사람에게는 추천하는 방법이 아니다.

내 글만 보더라도 본문 내 제목(h태그)과 본문과 인용구의 폰트가 다 다르다.

만일 티스토리를 이렇게 바꾸고 싶다면 일일이 font-family를 찾아서 노가다를 해도 되지만 이 포스팅을 정독하는 것도 좋은 방법일 것이다.

그럼 슬슬 시작하자.

 

---

Unsplash.com

먼저, 적용하고 싶은 예쁜 한글 폰트를 찾자.

폰트는 눈누라는 사이트에서 찾자. 다른 블로그들을 보면 웹폰트를 찾고 적용하는 방법을 잘 설명해두었다.

나는 본문용 폰트로 넥슨 Lv.2 고딕 Regular를 선택했고, 복사한 웹폰트 소스인

@font-face {
font-family: 'NEXON Lv2 Gothic';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/NEXON Lv2 Gothic.woff') format('woff'); font-weight: normal; font-style: normal;}  

요놈을 css 의 위 쪽에 붙여넣었다. 웹폰트는 그냥 위에 늘어두는 게 개인적으로 보기 편한 느낌이라.

저기서 font-family: 'NEXON Lv2 Gothic'; 이 부분을 예의주시하자. (저 '' 사이에는 개인이 선택한 웹폰트 이름이 들어가는 부분이다.)

때에 따라서 font-family: 'NEXON Lv2 Gothic'; 전체를 넣어줘야 할 때도 있고 'NEXON Lv2 Gothic'만 떼어내서 붙여넣어 주기만 해도 된다.

먼저 PC버전의 폰트를 바꿔보자.

body,th,td,input,select,textarea,button {font-size:16px;line-height:1.5;font-family:'NEXON Lv2 Gothic', sans-serif;color:#666}  

body,th,td,input,select,textarea,button로 시작하는 코드를 찾자.

여기서 폰트를 바꾸면 pc버전과 태블릿pc에서 보는 중간 사이즈의 티스토리 스킨까지 모조리 폰트가 다 바뀐다. 블로그 타이틀은 물론이고 그 아래 동그란 프로필 사진 아래의 닉네임까지 전부.

오로지 모바일만 바뀌지 않는다.

하지만 모바일에서 메뉴 카테고리를 열었을 때 보이는 텍스트의 폰트는 같이 바뀐다. 다만, 이 경우에는 개인 닉네임까지 바뀌지는 않는다.

폰트 외에 사이즈, 줄 간격, 색상 등등은 알아서 바꾸길.

그럼 이제 모바일 폰트를 바꿔보자.

@media 로 시작하는 코드 하단으로 가자.

.area_view { margin:0 15px;font-size:15px;line-height:24px;color:#333;font-family:'NEXON Lv2 Gothic'}  

스크롤바로 위치를 따지면 2/3 지점 쯤에 있는 친구다. .area_view로만 검색하면 여기저기 너무 많이 나오니 .area_view {로 검색하길. w랑 {사이에 띄어쓰기가 있으니 검색 시 유의할 것.

바로 여기의 폰트를 변경해주면 드디어 모바일 본문이 바뀌는 것이다!

본문만!

오로지 본문만!

테스트용 폰트는 눈에 확 튀게 어비다비체를 썼다.

정말 저 본문만 바뀌지, 모바일 화면에서 티스토리를 딱 들어왔을 때 보이는 글 목록의 폰트는 그대로다. ㅎ ... 징하다 증말.

참고로 저 코드 바로 아랫줄에 있는

.area_view p { line-height:23px }  

여기 숫자를 건들면 모바일 본문 글 간격만 조정된다.

자, 이제 모바일 구석구석 폰트를 좀 더 바꿔보자.

.list_control {display:none}
.article_skin {width:100%;min-height:100%;padding:45px 0 0 0}
.area_title {padding:0 15px 13px;margin-bottom:18px}
.area_title .tit_category a {font-weight:normal;font-size:14px}
.area_title .tit_post {padding:2px 0 3px;font-size:24px;line-height:30px}
.area_title .info_post {display:block;margin-top:5px;font-size:12px;font-family:applesdgothicneo-ultralight}
.area_title .info_post .txt_bar { margin:0 6px 0 4px}
.area_view { margin:0 15px;font-size:15px;line-height:24px;color:#333;font-family:'NEXON Lv2 Gothic' }  

저 파란 밑줄을 친 코드가 아까 모바일 본문의 폰트를 변경한 부분이다.

이제 본문 폰트 외에 저 코드랑 같이 붙어 있는 코드를 하나하나 세세하게 건들여주자. 하단에 보기 편하게 주석처리를 해두겠다.

참고로 폰트를 지정하려면 { } 이 사이에 font-family:'본인이 선택한 웹폰트 이름'을 넣어주면 된다. 붙이는 위치에 따라 앞이나 뒤에 세미콜론(;)도 꼭 넣어주길.

.list_control {display:none}
.article_skin {width:100%;min-height:100%;padding:45px 0 0 0}

/* 본문 제목과 카테고리 같이 폰트를 변경하려면 */
.area_title {padding:0 15px 13px;margin-bottom:18px}

/* 본문 제목만 폰트를 변경하려면 */
.area_title .tit_category a {font-weight:normal;font-size:14px}

/* 본문 제목 위 카테고리만 폰트를 변경하려면 */
.area_title .tit_post {padding:2px 0 3px;font-size:24px;line-height:30px}

/* 본문 제목 아래 닉네임, 날짜, 수정, 비공개, 삭제 폰트를 변경하려면 */
.area_title .info_post {display:block;margin-top:5px;font-size:12px;font-family:applesdgothicneo-ultralight}

/* 닉네임과 날짜 사이 간격 */
.area_title .info_post .txt_bar { margin:0 6px 0 4px}

/* 위에 언급했었던 본문 폰트 변경 */
.area_view { margin:0 15px;font-size:15px;line-height:24px;color:#333;font-family:'NEXON Lv2 Gothic' }  

사실, 본문 내 제목과 카테고리 폰트는 pc와 모바일을 한번에 바꿀 수도 있다.

/* 뷰 상단 */
.area_title{margin:0 0 30px;padding-bottom:20px;border-bottom:1px solid #efefef}

검색은 간단하게 뷰 상단을 검색하면 된다. 저렇게 주석 처리가 기본으로 되어있다.

뷰 상단이라는 주석 바로 아래에 있는 쪽을 건들어주자. { } 이 사이에 font-family:'본인이 선택한 웹폰트 이름'을 넣으면 끝.

폰트를 지정하게되면 pc와 태블릿 버전에서는 본문 내의 글 제목, 카테고리, 닉네임, 날짜, 수정, 공개, 삭제 이 부분이 한번에 싹 바뀐다.

(각각 따로 폰트를 주고 싶다면 저 코드 아랫줄 코드들 {} 사이에 font-family 넣길.)

테스트용 폰트는 HS겨울눈꽃체

이렇게 폰트를 지정해주면 겸사겸사 모바일까지 바뀌기도 한다.

그러나 이 경우에는 ...

이렇게 닉네임, 날짜, 수정, 공개, 삭제 쪽은 바뀌지 않는다. 바꾸고 싶다면 위에 적어둔 방법을 쓰길. 답은 노가다 뿐 ㅎ ...

아참.

여기에 text-align:center를 넣으면 가운데 정렬도 된다. pc랑 모바일이랑 같이 적용된다. 모바일에서의 정렬을 다르게 하고 싶다면 @media 쪽에서 추가적으로 건들자.

아, 혹시 블로그 제목 폰트만 바꾸고 싶은가?

헤더를 검색하자.

/* 헤더 */ 라는 주석아래를 보다보면

.area_head .area_profile .tit_post{padding:0 25px}

이렇게 단순한 코드가 있는데, 여기 {} 사이에 폰트를 지정해주자.

블로그 자체의 타이틀만 바뀐다. pc와 태블릿 버전은 당연히 바뀌고, 모바일의 경우에는 메뉴 카테고리를 펼쳤을 때, 상단에 있는 블로그 타이틀 폰트만 바뀐다.

뭔가 따라하다보니 사부작사부작 pc든 모바일이든 닉네임 폰트랑 이것저것 바꿀 수 있을 것 같지 않고 그런 느낌이 오지 않는가?

세세하게 바꾸고 싶다면, 화이팅...!

아참, 인용구 폰트를 바꾸는 포스팅은 이미 작성해두었다.

티스토리 반응형 스킨 #2 인용구 스타일 각각 폰트 변경 및 꾸미는 방법

인용구만 바꿔도 포스팅이 얼마나 예뻐지던지! 츄라이, 츄라이!

---

그나저나 포스팅이 너무 길어지는 것 같다.

글 목록과 카테고리 쪽 세세한 폰트 변경은 따로 포스팅을 파야겠다. 글을 쓰는 내가 지친다으아어아아ㅏㅏ......

포스팅 완성하면 추가로 덧붙이겠다. 빠잉.

 

---

 

- 카테고리(사이드바 포함) 폰트 바꾸기

티스토리 반응형 스킨 #2 카테고리의 폰트와 폰트 색상 변경하기

- 글 리스트(글 목록) 폰트 바꾸기

티스토리 반응형 스킨 #2 글 리스트 (글 목록) 폰트 편집하기

- h태그 폰트와 사이즈 바꾸기

티스토리 반응형 스킨 #2 h태그(헤딩 태그) 폰트와 사이즈를 바꾸는 방법

- 인용구 폰트 바꾸기

티스토리 반응형 스킨 #2 인용구 스타일 각각 폰트 변경 및 꾸미는 방법