친절한효자손 취미생활

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에서 볼 때는 반대로 약간 폰트가 뿌옇게 보이는 것 같아서 조금 아쉽기도 합니다. 당분간은 리디바탕체로 사용해볼까 합니다. 현재로서는 만족스럽습니다. 끝.





공유하기

facebook twitter kakaoTalk kakaostory naver band

댓글

비밀글모드

  1. 저도 적용 했네요.
    마음에 듭니다.
    좋은 정보 감사해요~
    2019.10.17 11:39 신고
  2. font-style: normal;
    font-weight: normal;
    부분은 적용하지 않아도 되죠?
    2019.11.04 11:09 신고
  3. 친효님 혹시 폰트를 인덱스 페이지와 같은 폰트로 바꾸려면 어떻게
    하면 되나요?
    2020.02.12 16:18 신고
  4. Favicon of https://eastsky3483.tistory.com
    크롬에서는 폰트가 재대로 나오는데 인터넷익스플로러11버전에서는 다른폰트로 나오는데 어떻게 하면될까요?
    2020.03.04 16:04 신고
  5. 비밀댓글입니다
    2020.04.15 17:39
    • 안녕하세요, 본문에 나온 모든 코드만 삭제하면 됩니다.
      2020.04.15 18:43 신고
    • 비밀댓글입니다
      2020.04.15 18:56
    • 에...그러니까 현재 이 본문에 나온 적용법과 반대로 진행하면 된다는 뜻 입니다.
      2020.04.15 19:04 신고
    • 본문에 나눔고딕으로 적용을 위해서 font-family: "NanumGothic"; 을 입력하시면 됩니다.
      2020.04.15 19:25 신고
  6. 안녕하세요
    스킨 적용하기 위해서 계속 공부중인데요,
    본문 폰트를 티스토리 원래 버전으로 할 수 있는 방법은 없나요?
    진짜 본문을 찾아서 나눔 고딕으로 하고 줄간격을 강제로 벌려도
    글 작성중인 글에는 제대로 보이는 데 완료만 눌러서 발행하면 줄간격이 붙어 있는 이롭게바탕체로 되는데 방법이 있을까요???

    /* 진짜본문 (article_rep_desc) */
    #contents .article {
    word-break: break-all;
    -webkit-word-break: break-all;
    padding: 20px;
    border: 1px solid #E5E5E5;
    border-radius: 0;
    font-family: "NanumGothic", "Noto Sans Kr", sans-serif;
    font-size: 1em;
    line-height: 1.5em;
    letter-spacing: 0;
    2020.12.13 19:02 신고
    • 안녕하세요 원래버전이라함은 Noto Sans Kr (본고딕)체를 말씀하시는건가요?
      2020.12.13 19:23 신고
  7. 글씨체도 다르고요 폰트도 조금 크고 줄간격 도 다소 붙어있어서 원래 티스토리 글을 써보고 싶어서요
    늘 친절히 답변 주셔서 감사합니다
    2020.12.13 19:50 신고
    • 원래 티스토리라는건 없어요. 왜냐면 스킨은 무조건 하나는 써야하고 해당 스킨에 맞는 폰트체와 크기 자간 줄간격이 설정되어 있습니다. 따라서 각 스킨마다 다를겁니다. 티스토리에서 제공하는 무료스킨들도 저마다 다른값을 가지고 있습니다. 정 변경하고 싶으시면 수동으로 바꾸시는 방법밖에 없겠죠.
      2020.12.13 19:53 신고
    • 친효스킨은 본문폰트크기, 줄간격, 자간, 들여쓰기 설정이 가능한 스킨이니 스킨편집 페이지 가셔서 진행하시면 됩니다. 폰트변경옵션을 넣지않은이유는 가독성을 오히려 해칠수있으며 변경옵셜을 넣으려면 해당폰트를 모두 로딩해야하는데 그러면 스킨이 무거워지기 때문입니다. 따라서 폰트는 수동변경 하셔야합니다. https://rgy0409.tistory.com/3702 이 방법을 응용하면 될겁니다.
      2020.12.13 19:59 신고
    • 네 그 글 보고
      /* 진짜본문 (article_rep_desc) */
      #contents .article {
      word-break: break-all;
      -webkit-word-break: break-all;
      padding: 20px;
      border: 1px solid #E5E5E5;
      border-radius: 0;
      font-family: "NanumGothic", "Noto Sans Kr", sans-serif;
      font-size: 1em;
      line-height: 1.5em;
      letter-spacing: 0;
      이렇게 고쳤는데 동일하더라고요
      조금 더 공부 해 보겠습니다. 감사합니다
      2020.12.13 20:00 신고
  8. 아 그렇군요. 스킨마다 자간 줄간격이 다른 걸 몰랐네요. 전 왓에버 스킨을 쓰고 있었는데 줄간격만 늘리는 방법은 혹시 있을까요?
    css에서 하이트를 높였는데 막상 발간하면 줄간격이 좁게 나와서요 ^^;;,
    2020.12.13 19:56 신고
    • 코딩질문을 하시는거군요. 왓에버스킨을 안써서 모르겠습니다.
      2020.12.13 19:59 신고
    • 코딩 질문이 아니라 친효스킨 줄간격을 말씀 드리는 거였어요. 너무 많이 질문 드려 죄송합니다. 충분히 많은 도움 되었습니다. 감사합니다. 좋은 하루 되세요
      2020.12.13 20:01 신고
    • 왓에버스킨 쓰신다고 하지 않으셨어요?
      2020.12.13 20:02 신고
    • 맞아요 친효로 바꾸려고 한번 적용해봤는데 줄간격이 이상해져서 다시 원상복귀한 상태입니다
      2020.12.13 20:03 신고
    • 친효스킨 다운로드 페이지를 정독 안 하셨기 때문에 이런문제가 발생한겁니다. 해당페이지에 본문 줄간격 설정방법 나와있어요. 코딩수정없이 편리하게 스킨편집 화면에서 설정가능합니다.
      2020.12.13 20:04 신고
    • 하하 자세히 읽었다고 생각했는데 놓쳤네요 적용해보겠습니다
      2020.12.13 20:19 신고