[Tistory] 리디바탕체 적용_Poster Skin

 

 

 

안녕하세요.

티스토리 스킨을 또 변경하였습니다.

Whatever 스킨을 사용하다 좀 지겨워  Magazine 스킨으로 얼마 전 변경하였는데,

스킨이 너무 무거워 이번에 Letter 와 Poster 중 고민하다 Poster 스킨으로 다시 변경하였습니다.

 

기존 Magazine 스킨에서 처음 리디바탕체를 적용하여 사용하였는데,

Poster 스킨으로 바꾸면서 관련 설정을 또 해주다 보니 기록해 두는 게 좋을 거 같아서 포스팅 합니다.

 

설정 방법은

스킨 편집 메뉴의 html 편집으로 들어가서 css 설정을 변경해 주시면 됩니다.

리디바탕체 다운로드 및 기본적인 설정은 별도로 설명하지 않겠습니다.

 

/* Web Font Load */
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('//fonts.googleapis.com/css?family=Nanum+Myeongjo');


/* 리디바탕체 적용 */
@font-face {
	font-family: 'RIDIBatang';
	font-style: normal;
	font-weight: normal;
	src: url('https://www.ridicorp.com/branding/fonts/ridibatang/RIDIBatang.otf');
}

 

스킨마다 사용하는 변수값이 달라서 어디에 적용해야 할지 헷갈리는 경우가 많습니다.

최상단의 Web Font Load 아래에 위와 같이 리디바탕체 관련 설정을 하였습니다.

src: 경로의 경우 web주소를 적었지만 파일 업로드하였을 경우에는 ./images/RIDIBatang.otf 로 변경 가능합니다.

폰트 변경 시 크롬 브라우져에서는 잘 보이는데, 인터넷 익스플로러에서는 적용이 되지 않아 저렇게 경로를 줬는데 여전히 안되네요.

 

 

 

 

전체 폰트 일괄 변경

/* Type Selector Reset */
body {
	font-weight: 400;
	font-family: 'RIDIBatang' , 'Noto Sans KR', sans-serif;
	font-size: 1em;
	line-height: 1.7;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
}
html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	font-size: 100%;
}

티스토리 블로그 전체 Font 를 변경하고자 할 때는 Body 부분에

Font-family 값에 'RIDIBatang' 을 제일 앞에 적용해주시면 다른 폰트보다 먼저 리디바탕체를 출력해 줍니다.

font-family 의 값에는 여러가지 폰트를 적어줄 수 있으며 맨 앞에서부터 순차적으로 적용됩니다.

 

 

 

 

본문 글만 폰트 변경

/* Entry Content */

.entry-content {
    position: relative;
    line-height: 2.5 !important;
    word-break: break-all;
    text-align: justify;
    font-weight: inherit; 
    font-size: 20px;
	  font-family: "RIDIBatang" , "Noto Sans KR" , sans-serif;
    }

 

메인페이지나  다른 글의 폰트는 그대로 유지한 채 본문 내용의 글만 폰트를 바꾸고 싶으시다면,

css 의 내용 중 1200번 줄 근처의 "Entry Content" 항목에 위 내용을 추가해 줍니다.

 

.entry-content h1 {
	margin: 60px 0 19px;
	font-size: 1.6875em;
}

h1 설정값 바로 위에 추가해 주시면 됩니다.

 

다른 스킨도 마찬가지인데 대부분의 스킨에서 본문 글에 대한 폰트 설정을 별도로 가지고 가지 않더라구요.

그래서 다른 설정값들은 기존의 값을 찾아서 수정해주면 되는데,

본문 글의 폰트만 변경하고자 할때는 위 내용처럼 entry-content 항목을 추가해 주셔야 합니다.

 

'entry-content' 라는 항목은 "Poster" 스킨에서 사용하는 항목이므로 다른 스킨에서는 해당 항목의 이름이 다른 값일 수 있으니 주의하시기 바랍니다.

 

이상입니다.

 

 

 

 

♥읽어주셔서 감사합니다♥
티스토리 댓글과 공감♥은 로그인이 필요 없습니다.
로그인하시면 구독 가능합니다.