티스토리 친효스킨에 리디바탕체 폰트 글꼴 글씨체 추가 적용하는 방법
2019 한글날을 맞이하여 리디북스에서 리디바탕체를 배포했습니다. 무려 1년 6개월간 개발한 폰트라고 하는군요. 그래서 그런지 가독성은 물론이며 글 읽는게 조금 편하다는 느낌을 많이 받았습니다. 이 글꼴을 만나본순간, '아 이거 내 스킨에 적용시켜야겠다!' 하고 다짐했을 정도입니다. 2019 한글날 무료 폰트에 대한 정보는 아래에 링크를 올려두었으니 한번 읽어보시기 바랍니다. 리디바탕체는 링크 페이지의 아래쪽에 있습니다. 먼저 리디바탕체를 다운로드 받아 주시기 바랍니다. 그리고 티스토리 관리자 화면으로 이동하시고 스킨 편집 화면으로 들어가 주시면 됩니다.
폰트 파일 업로드
스킨편집 화면으로 들어오시면 이렇게 파일업로드 탭이 있습니다. 해당 메뉴로 클릭하여 들어가서 추가 버튼을 누르고 다운받은 RIDIBatang.otf 파일을 업로드 합니다.
HTML 세팅
여기에서는 따로 설정할게 없습니다.
CSS 세팅
먼저 아래의 코드를 확인해 주시기 바랍니다. 파일로 업로드 했습니다. 편하게 다운 받으셔서 사용하시면 됩니다.
/* 블로그 : https://rgy0409.tistory.com */
/* e-mail : rgy0409@gmail.com */
@font-face {
font-family: "RIDIBatang";
font-style: normal;
font-weight: normal;
src: url('./images/RIDIBatang.otf');
}
친효스킨 리디바탕체 추가 CSS.txt이것을 CSS 탭에서 적당한 공간을 확보하여 그래도 붙여넣기 해주시면 됩니다.
이렇게 붙여넣기 해주시면 됩니다. 친효스킨의 경우는 최상단쪽에 있는 root 관련 항목 바로 다음에 붙여넣기를 진행했습니다.
그리고 CSS 탭에서 Ctrl+F를 눌러서 article_rep_desc를 검색합니다. 그러면 본문 관련 스타일 태그 시작 부분이 검색이 됩니다. #contents .article로 검색하셔도 됩니다. 이 선택자에 font-family: "RIDIBatang"; 스타일 요소를 추가합니다. 이렇게 하면 끝 입니다. 이제 오른쪽 상단에 있는 적용 버튼을 누르고 본문을 확인해 보세요. 잘 적용이 되었을 겁니다.
리디바탕체 해제 방법
본문에서 설명드린 관련 CSS 태그들을 모두 삭제하시면 됩니다.
리디바탕체 적용 후기
확실히 E-Book에 최적화된 폰트다보니 PC보다는 스마트폰에서 볼 때 가독성이 더 좋은 것 같습니다. 글씨도 확실하게 쏙 눈에 들어옵니다. 읽기도 편한 것 같구요. 너무 만족스러운 폰트 입니다. 다만 PC에서 볼 때는 반대로 약간 폰트가 뿌옇게 보이는 것 같아서 조금 아쉽기도 합니다. 당분간은 리디바탕체로 사용해볼까 합니다. 현재로서는 만족스럽습니다. 끝.
"친절한효자손 취미생활" 을 검색!
