티스토리 최강 스킨, 미넴스킨 폰트 변경 방법! 웹폰트 이용하기

현재 지금 보고 계시는 블로그는 티스토리 무료 스킨 중에서도 가성비는 말할 것도 없고 성능과 기능이 굉장한 치킨이라는 블로그 스킨을 사용하고 있습니다.여러가지 장점들이 있는데 일단 꾸미기가 굉장히 싶다, 광고를 넣는 쉽다는 것이 장점이죠.

티스토리 무료 최강 미넴 스킨 소개 및 설치 방법

기본 제공 스킨을 나름대로 고쳐 쓰다가 만족하지 못하고 그냥 새로 만들었습니다. 여태까지 블로그를 하면서 적용한 많은 기능들을 대부분 포함하였으니 누군가에게는 상당히 유용한 스킨이

sangminem.tistory.com

지금 이 스킨을 사용한 것이 거의 반년 정도가 되어가고 있습니다. 그런데 같은 스킨도 오래 사용하다 보면 조금 질리는 느낌이 있습니다. 그럴 때 가장 효과적인 방법 중 하나는 스킨을 조금 손 보는 것입니다. 색깔을 변경해 보기도 하고 아니면 폰트를 바꿔 보는 것도 방법입니다. 블로그를 꾸미는 것이 들어오는 사람들 방문자들을 위해서 최고의 환경을 제공하는 것도 있고, SEO에 최적화 시키는 방법도 있지만. 가장 최우선은 질리지 않고 재밌게 하는 방법입니다.


어렵다 미넴스킨, 그런데 알아가는 재미가 있다.

그런데 미넴스킨은 기존의 제가 알던 것과는 다르게 폰트를 변경하는 것이 살짝 어려웠습니다.
저는 뼛속까지 문과이다보니 하나하나 보면서 파악하고 이해하고- 하는 데 시간이 오래걸리더라구요.

폰트 변경은 두번에 걸쳐 진행이 됩니다. CSS 에서 적용할 폰트의 웹폰트 @Font-family 를 추가해주고, html 에서 특정 부위에 해당 폰트의 Font 를 지정해서 우선 출력되도록 설정해줘야 웹폰트가 적용되어 다른 사람들이 사용하는 스마트폰 / 브라우저의 폰트보다 우선적으로 적용이됩니다.

눈누

IBM Plex Sans – IBM

noonnu.cc

웹폰트를 사용해서 미넴스킨의 글꼴/폰트를 변경할 예정입니다. 웹폰트를 가져 오는 곳은 국내에서 많은 사람들이 사용하고 있는 눈누 에서 가져오기로 했습니다. 구글 폰트 사이트의 웹폰트 html 을 이용해서 폰트/글꼴을 변경을 하는 방법도 있는데요, 이는 나중에 다시 한번 포스팅 글을 작성하도록 하겠습니다.

변경하는데 사용되는 폰트는 IBM Plex Sans 입니다.

@font-face {     font-family: 'IBMPlexSansKR-Regular';     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/IBMPlexSansKR-Regular.woff') format('woff');     font-weight: normal;     font-style: normal; }


1. CSS 에 눈누 웹폰트 font-face ,font-Family 넣어주기

2. html 에 변경할 글꼴을 우선순위로 지정해주기.


font-family: <s_if_var_custom-font>[##_var_custom-font_##]</s_if_var_custom-font>“Noto Sans DemiLight”,AppleSDGothicNeo,“Malgun Gothic”,“맑은 고딕”,“돋움”,dotum,sans-serif,‘Font_Awesome_5_Free’ !important;

   font-family: 'IBMPlexSansKR-Regular';

앞서 따로 메모해놓은

‘IBMPlexSansKR-Regular’ 을 복사해서 </s_if_var_custom-font>“Noto Sans DemiLight” 사이인 , ~“Noto San 앞에 넣어줍니다. ‘IBMPlexSansKR-Regular’ 을 넣어주고 뒤에 , 까지 입력해줘야 정상적으로 작동이 됩니다.

예시는 다음과 같습니다.


font-family: <s_if_var_custom-font>[##_var_custom-font_##]</s_if_var_custom-font>‘IBMPlexSansKR-Regular’, “Noto Sans DemiLight”,AppleSDGothicNeo,“Malgun Gothic”,“맑은 고딕”,“돋움”,dotum,sans-serif,‘Font_Awesome_5_Free’ !important;

3. 미넴스킨 폰트 설정에서 기본 글꼴로 지정하기

가장 어려운 구간이 끝났습니다. 이제 미넴스킨에서는 기본적으로 글꼴 폰트 설정을 아주 손쉽게 변경할 수 있도록 지원하는 옵션이 있습니다. 기본폰트로 지원을 하고 이롭게바탕체, 리디바탕 이렇게 3가지 설정을 지원하는데요.

방금 전 1, 2 번의 설정변경. CSS 와 html 변경을 통해 기본 글꼴을 IBM Plex Sans 로 바꾸어 적용하였습니다. 이롭게바탕체 혹은 리디바당을 사용하시는 분은 기본 으로 바꿔주시면 변경된 글꼴/폰트가 정상적으로 바뀌는 것을 확인하실 수 있으실 겁니다.