몽땅뚝딱 개발자

[티스토리꾸미기] Pretendard 적용하기 / 폰트 적용하기 본문

Design/티스토리

[티스토리꾸미기] Pretendard 적용하기 / 폰트 적용하기

레오나르도 다빈츠 2023. 3. 8. 19:06

 

 

서치하다보면 velog UI가 너무 예뻐서,, 갈아타야하는 것인가 많이 고민했다.

하지만 당장 갈아타기엔 시간이 걸릴 것 같고 티스토리만의 장점도 있기때문에 우선 급한불부터 껐다.

 

- font-family를 Pretendard로 변경했다.

- h1, h2, ...h4 태그는 쓸데없이 padding이 50px 정도로 들어가있었다. 그래서 항상 포스팅을 하다보면 내가 생각한 결과물대로 나오지 않아서 성취감이 -10정도 떨어졌다. 모든 padding을 0으로 수정해버렸다.

- 기본 폰트크기를 16px → 18px로 조정했다.

- 간격이 숨막혔던 코드 블록에 padding을 넓히고 border-radius를 주었다. 스크롤바 없는게 불편해서 숨기지않으려고했지만 실패.. 다음에 시도해보자.

 

이 정도만 해도 속이 시원하다.

귀찮아서 미루고 미루다가 반차쓴김에 날 잡고 적용해보기.. 재밌었다.

 

훨씬 낫다..

 

 

 


 

 

 

혹시 누군가에게 도움이 될까해서 남겨보는 적용방법..😀

 

1. 티스토리 환경설정 > 스킨편집에서 CSS에 아래 코드를 import 한다. 상단 아무데나 넣으면 된다.

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');

 

 

2. /* reset */으로 시작하는 저 코드에서 아래부분을 찾아 font-family 제일 앞에 Pretendard를 넣어준다.

body,th,td,input,select,textarea,button {
    font-size:20px;
    line-height:1.5;
    font-family: Pretendard, 'applesdgothicneo-light', 'Malgun Gothic', '맑은 고딕';
    color:#666;
    font-weight: 200;
}

 

 

 

 

 

Comments