[정보] 티스토리 모바일웹 본문 꾸미기 1탄

1. 해당 포스팅은 스포일러를 포함하고 있을 수 있습니다.
2. 사용하시다가 불편하신 점이 있다면 방명록으로 남겨주세요.
3. 왕래는 하지 않습니다.

728x90

728x170

1. 티스토리 모바일웹 본문 꾸미기 1탄

티스토리 모바일웹 본문 꾸미기 1탄으로 폰트를 바꾸는 것을 가지고 와보았다. 어디까지나 나는 자기만족용으로 사용하고 있는 부분이 있고, 여차하면 모바일은 모바일웹으로 쓸지도 모르겠다는 생각을 가지고 일단은 작업을 해둔 편이다.

내가 생각하는 주의사항은 다음과 같다.

1. 이 방법은 본문마다 적용시켜야 한다. 따라서 1천개 이상, 100개 이상 등 많은 정보를 담고 있는 블로그에서 적용하기에는 옳지 않다. (물론 나는 이렇게 다 바꿀 거야. 하는 경우에는 당신의 선택을 응원하겠다.)

2. 해당 방법은 티스토리 스킨에서 적용되는 폰트 따로, 티스토리 모바일웹 본문에서 적용되는 방법 따로다.

3. 수정을 하게 될 경우, 매번 코드를 입력해야 한다. 수정은 되도록 하지 말고, 코드는 백업해두자.

2. 폰트 바꾸기

먼저 우리는 티스토리 모바일 웹이 어떻게 보이는지 일단 한 번 봐보도록 하자.

해당 글을 보았을 때 원래대로라면 저렇게 나오는 게 맞다. 하지만 저 폰트를 다른 폰트로 바꾸는 마법을 한 번 부려보도록 하겠다.

2.1 폰트 고르기

일단 우리는 티스토리 모바일웹에서 사용할 폰트를 골라야 한다. 구글 폰트나 아니면 눈누 사이트에서 검색을 해주면 된다. 눈누 사이트에서는 "허용 범위"를 잘 파악해서 사용해야 한다.

나의 경우엔 일찍이 '나눔스퀘어 네오체'를 사용하고 있고 현재 스킨에 따라 폰트는 달라지겠지만, 티스토리 모바일웹에서는 꾸준히 이 폰트를 사용하려고 해서 채택했다.

아무래도 이 방법을 사용하려면 본문마다 폰트를 적용해야 한다는 단점이 있지만, 장점으로는 본문마다 다양한 폰트를 사용할 수 있다는 이점도 분명히 존재하기 때문이다.

다만 나는 통일성을 주기 위해 하나의 폰트를 사용하려고 했고 깔끔하면서 나름 괜찮은 폰트라고 생각해서 결정하게 되었다. 무엇보다 나눔 폰트가 나에게는 안전지대 같은 느낌이 있어서 그렇다. (허용 범위를 체크해보았을 때 모두 가능하다고 나와 있는 폰트다.)

2.2 웹폰트 복사하기

만약 눈누에서 폰트를 골랐다면 웹폰트로 사용을 눌러서 해당 코드를 복사해준다.

2.3 <style>과 </style> 사이에 웹폰트 코드를 넣어준다.

아래는 예시이며, 나의 경우 나눔스퀘어 네오체를 사용하고 있기 때문에 <style>과 </style> 사이에 나눔스퀘어 네오체를 넣어주었다.

<style>
@font-face { font-family: 'NanumSquareNeo-Variable'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2'); font-weight: normal; font-style: normal; }
</style>

2.4 티스토리 모바일웹에 적용할 수 있도록 코드 입력하기

<style>
@font-face { 웹폰트 코드 붙여넣기 }
.blogview_content{ font-family: '폰트명' }
</style>

예시)

<style>
@font-face { font-family: 'NanumSquareNeo-Variable'; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_11-01@1.0/NanumSquareNeo-Variable.woff2') format('woff2'); font-weight: normal; font-style: normal; }
.blogview_content{ font-family: 'NanumSquareNeo-Variable'; }
</style>