[이모저모] 티스토리 본문 폰트 선택 버튼 만들기｜눈누 웹 폰트 CSS 적용 방법

본문 폰트를 선택해서 읽을 수 있습니다.

도스이야기체 써라운드 에어체

안녕하세요. 월요일의 21입니다. 지난 글을 다시 보니, 정작 따라 하려는 사람에게 제일 필요한 과정 설명을 너무 대충 넘겼더라. 그래서 이번에는 그 부분만 따로 다시 정리한다. 티스토리 글쓰기 에디터에서 HTML 모드로 들어간 뒤, 전체를 하나의 감싸는 영역으로 묶고, 그 안에 폰트 불러오기, 선택 버튼, 본문 영역을 한꺼번에 넣는 방식이다.

<div class="font-toggle-wrap">
<style>
@font-face {
  font-family: 'DosStory';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/DOSIyagiMedium.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cafe24SsurroundAir';
  src: url('https://gcore.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24SsurroundAir.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
  티스토리 폰트 선택 포스팅 전체 설정
========================================================= */
.font-toggle-wrap {
  --post-font-size-pc: 17px;
  --post-font-size-mobile: 17px;

  --post-line-height-pc: 2em;
  --post-line-height-mobile: 2em;

  --note-line-color: #e9e9e9;
  --note-line-thickness: 1px;
}

/* 라디오 버튼 숨김 */
.font-toggle-wrap .font-choice-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* 기본 본문 영역 */
.font-select-post {
  font-family: 'DosStory', serif !important;
}

/* =========================================================
  CSS만으로 폰트 전환

  - onclick 사용 안 함
  - JavaScript 사용 안 함
  - 라디오 버튼 선택 상태에 따라 본문 폰트 변경
========================================================= */
#fontDosChoice:checked ~ #fontSelectPostArea,
#fontDosChoice:checked ~ #fontSelectPostArea p,
#fontDosChoice:checked ~ #fontSelectPostArea span,
#fontDosChoice:checked ~ #fontSelectPostArea div,
#fontDosChoice:checked ~ #fontSelectPostArea b,
#fontDosChoice:checked ~ #fontSelectPostArea strong,
#fontDosChoice:checked ~ #fontSelectPostArea u,
#fontDosChoice:checked ~ #fontSelectPostArea ins,
#fontDosChoice:checked ~ #fontSelectPostArea mark,
#fontDosChoice:checked ~ #fontSelectPostArea ul,
#fontDosChoice:checked ~ #fontSelectPostArea ol,
#fontDosChoice:checked ~ #fontSelectPostArea li {
  font-family: 'DosStory', serif !important;
}

#fontCafeChoice:checked ~ #fontSelectPostArea,
#fontCafeChoice:checked ~ #fontSelectPostArea p,
#fontCafeChoice:checked ~ #fontSelectPostArea span,
#fontCafeChoice:checked ~ #fontSelectPostArea div,
#fontCafeChoice:checked ~ #fontSelectPostArea b,
#fontCafeChoice:checked ~ #fontSelectPostArea strong,
#fontCafeChoice:checked ~ #fontSelectPostArea u,
#fontCafeChoice:checked ~ #fontSelectPostArea ins,
#fontCafeChoice:checked ~ #fontSelectPostArea mark,
#fontCafeChoice:checked ~ #fontSelectPostArea ul,
#fontCafeChoice:checked ~ #fontSelectPostArea ol,
#fontCafeChoice:checked ~ #fontSelectPostArea li {
  font-family: 'Cafe24SsurroundAir', sans-serif !important;
}

/* 색상, 형광펜 span도 부모 폰트 따라가게 처리 */
.font-select-post span[style*="font-family"],
.font-select-post span[style*="color"],
.font-select-post span[style*="background-color"] {
  font-family: inherit !important;
}

/* =========================================================
  폰트 선택 박스
========================================================= */
.font-switch-box {
  margin: 0 0 22px 0;
  padding: 14px 14px 10px 14px;
  border: 1px solid #e0e0e0;
  background: #fafafa;
  box-sizing: border-box;
  text-align: left;
}

.font-switch-box p {
  margin: 0 0 10px 0 !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  text-align: left !important;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 버튼처럼 보이는 label */
.font-switch-box label {
  display: inline-block;
  font-size: 14px;
  line-height: 1.5;
  padding: 6px 10px;
  margin: 0 4px 6px 0;
  border: 1px solid #cfcfcf;
  background: #ffffff;
  color: #333333;
  cursor: pointer;
  border-radius: 4px;
  box-sizing: border-box;
}

.font-switch-box label:hover {
  background: #f2f2f2;
}

/* 선택된 폰트 버튼 표시 */
#fontDosChoice:checked ~ .font-switch-box label[for="fontDosChoice"],
#fontCafeChoice:checked ~ .font-switch-box label[for="fontCafeChoice"] {
  background: #eeeeee;
  border-color: #999999;
  font-weight: bold;
}

/* =========================================================
  본문 문단
========================================================= */
.font-select-post p {
  font-size: var(--post-font-size-pc) !important;
  line-height: var(--post-line-height-pc) !important;
  text-align: justify !important;
  text-justify: inter-word;

  word-break: keep-all;
  overflow-wrap: break-word;
  white-space: normal;

  margin: 0 0 28px 0;
}

/* p 안쪽 span은 문단 설정 상속 */
.font-select-post p > span,
.font-select-post p span[style*="font-family"] {
  font-size: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit;
}

/* =========================================================
  줄노트 문단
========================================================= */
.font-select-post p.line-note-only-pc {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(2em - 1px),
    var(--note-line-color) calc(2em - 1px),
    var(--note-line-color) 2em
  );
  background-size: 100% 2em;
  padding: 20px;
  box-sizing: border-box;
}

/* =========================================================
  밑줄
========================================================= */
.font-select-post u,
.font-select-post ins {
  text-decoration-line: underline !important;
  text-decoration-color: #e06b6b !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}

/* =========================================================
  리스트
========================================================= */
.font-select-post ul,
.font-select-post ol {
  font-size: var(--post-font-size-pc) !important;
  line-height: var(--post-line-height-pc) !important;
  text-align: left !important;

  margin: 0 0 28px 0;
  padding: 0 0 0 24px;
  box-sizing: border-box;

  word-break: keep-all;
  overflow-wrap: break-word;
}

.font-select-post ul li,
.font-select-post ol li {
  font-size: inherit !important;
  line-height: inherit !important;
  margin: 0 0 6px 0;
  padding: 0;

  word-break: keep-all;
  overflow-wrap: break-word;
}

.font-select-post ul li {
  list-style: disc;
}

.font-select-post ol li {
  list-style: decimal;
}

/* =========================================================
  코드블럭 줄바꿈

  - 코드블럭은 본문 선택 폰트를 따라가지 않음
  - 코드 가독성을 위해 고정폭 폰트 유지
========================================================= */
.font-select-post pre,
.font-select-post pre code,
.font-select-post pre code span,
.tt_article_useless_p_margin pre,
.tt_article_useless_p_margin pre code,
.tt_article_useless_p_margin pre code span,
.contents_style pre,
.contents_style pre code,
.contents_style pre code span {
  font-family: Consolas, Monaco, 'Courier New', monospace !important;
}

.font-select-post pre,
.font-select-post pre code,
.tt_article_useless_p_margin pre,
.tt_article_useless_p_margin pre code,
.contents_style pre,
.contents_style pre code {
  white-space: pre-wrap !important;
  word-break: break-all !important;
  overflow-wrap: anywhere !important;
}

/* =========================================================
  PC 자간 / 띄어쓰기 보정
  - 모바일은 건드리지 않음
  - 해당 게시글 안에서만 적용
========================================================= */
@media screen and (min-width: 769px) {
  #fontSelectPostArea.font-select-post p {
    text-align: justify !important;
    text-align-last: left !important;
    text-justify: inter-word !important;

    letter-spacing: -0.03em !important;
    word-spacing: -0.10em !important;

    word-break: keep-all !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }

  #fontSelectPostArea.font-select-post p span,
  #fontSelectPostArea.font-select-post p u,
  #fontSelectPostArea.font-select-post p ins,
  #fontSelectPostArea.font-select-post p mark,
  #fontSelectPostArea.font-select-post p b,
  #fontSelectPostArea.font-select-post p strong {
    letter-spacing: inherit !important;
    word-spacing: inherit !important;
    line-height: inherit !important;
  }
}


/* =========================================================
  모바일 조정

  - 모바일에서도 본문 양쪽 정렬 유지
  - 줄노트는 모바일에서 제거
  - 리스트는 모바일에서도 왼쪽 정렬 유지
========================================================= */
@media screen and (max-width: 768px) {
  .font-select-post p {
    font-size: var(--post-font-size-mobile) !important;
    line-height: var(--post-line-height-mobile) !important;

    text-align: justify !important;
    text-align-last: left !important;
    text-justify: inter-word;

    letter-spacing: -0.02em !important;
    word-spacing: -0.04em !important;

    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    white-space: normal;

    margin: 0 0 26px 0;
  }

  .font-select-post p.line-note-only-pc {
    background-image: none !important;
    padding: 0 !important;
  }

  .font-select-post ul,
  .font-select-post ol {
    font-size: var(--post-font-size-mobile) !important;
    line-height: var(--post-line-height-mobile) !important;
    padding-left: 22px;
    margin-bottom: 26px;
    text-align: left !important;
  }

  .font-select-post ul li,
  .font-select-post ol li {
    line-height: inherit !important;
    margin: 0 0 6px 0;
  }

  .font-switch-box {
    padding: 12px 12px 8px 12px;
  }

  .font-switch-box p {
    font-size: 14px !important;
  }

  .font-switch-box label {
    font-size: 13px;
    padding: 6px 9px;
  }
}
</style>

<input id="fontDosChoice" class="font-choice-radio" checked="checked" name="fontChoicePost" type="radio" />
<input id="fontCafeChoice" class="font-choice-radio" name="fontChoicePost" type="radio" />

<div class="font-switch-box">
  <p data-ke-size="size16">본문 폰트를 선택해서 읽을 수 있습니다.</p>
  <label for="fontDosChoice">도스이야기체</label>
  <label for="fontCafeChoice">써라운드 에어체</label>
</div>

<div id="fontSelectPostArea" class="font-select-post">

<p class="line-note-only-pc" data-ke-size="size16">
  <span style="font-family: inherit;">
    여기에 첫 번째 문단을 넣는다. 이 문단은 기본적으로 도스이야기체로 보이고, 위에서 써라운드 에어체를 누르면 폰트가 바뀐다.
  </span>
</p>

<p class="line-note-only-pc" data-ke-size="size16">
  <span style="font-family: inherit;">
    두 번째 문단도 같은 방식으로 넣는다. 중요한 건 span 안에 특정 폰트명을 직접 박지 않는 것이다. font-family: inherit으로 둬야 위에서 선택한 폰트를 따라간다.
  </span>
</p>

<p class="line-note-only-pc" data-ke-size="size16">
  <span style="font-family: inherit;">
    <u>밑줄은 이렇게 넣으면 되고</u>, <span style="background-color: #f6e199;">형광펜은 이런 식으로 넣으면 된다</span>. 그래도 폰트는 부모 설정을 따라가게 처리해 두었기 때문에 선택 기능이 깨지지 않는다.
  </span>
</p>

<ul style="list-style-type: disc;" data-ke-list-type="disc">
  <li><span style="font-family: inherit;">기본 폰트는 도스이야기체다.</span></li>
  <li><span style="font-family: inherit;">선택하면 카페24 써라운드에어체로 바뀐다.</span></li>
  <li><span style="font-family: inherit;">JavaScript 없이 CSS만 사용한다.</span></li>
  <li><span style="font-family: inherit;">PC에서는 줄노트가 보이고 모바일에서는 사라진다.</span></li>
  <li><span style="font-family: inherit;">코드블럭은 고정폭 폰트로 유지한다.</span></li>
  <li><span style="font-family: inherit;">본문 영역 밖의 댓글이나 스킨은 건드리지 않는다.</span></li>
</ul>

</div>
</div>

위 코드는 전체 구조를 한 번에 넣어둔 완성형이다. 티스토리 글쓰기 에디터에서 HTML 모드로 들어간 뒤 그대로 붙여 넣고, 아래쪽 본문 문단만 자기 글에 맞게 바꿔 쓰면 된다.

겉으로 보기에는 버튼 두 개로 폰트를 바꾸는 것처럼 보이지만, 실제로는 숨겨진 radio input과 label, 그리고 CSS의 :checked 선택자를 이용하는 방식이다. JavaScript 없이 처리하는 이유도 여기에 있다. 티스토리 에디터가 onclick 같은 속성을 언제까지 얌전히 놔둘지 믿기에는, 이미 몇 번 당해봤기 때문이다.

 

@font-face {
  font-family: 'DosStory';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2304-2@1.0/DOSIyagiMedium.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cafe24SsurroundAir';
  src: url('https://gcore.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24SsurroundAir.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

위 코드는 눈누 웹 폰트를 불러오는 부분이다. 여기서는 도스이야기체와 카페24 써라운드 에어체를 사용했다. 도스이야기체는 기본 폰트로 쓰고, 써라운드 에어체는 독자가 선택할 수 있는 두 번째 폰트로 넣었다.

font-family 이름은 마음대로 정할 수 있지만, 한 번 정했으면 아래 CSS에서도 반드시 같은 이름을 써야 한다. DosStory라고 써놓고 아래에서 Dosstory라고 쓰면 안 먹는다. CSS는 사람처럼 대충 알아듣지 않는다. 오타가 나면 그냥 망한다.

<div class="font-toggle-wrap">

  <style>
    여기에 CSS 코드 입력
  </style>

  <input id="fontDosChoice" class="font-choice-radio" checked="checked" name="fontChoicePost" type="radio" />
  <input id="fontCafeChoice" class="font-choice-radio" name="fontChoicePost" type="radio" />

  <div class="font-switch-box">
    <p data-ke-size="size16">본문 폰트를 선택해서 읽을 수 있습니다.</p>
    <label for="fontDosChoice">도스이야기체</label>
    <label for="fontCafeChoice">써라운드 에어체</label>
  </div>

  <div id="fontSelectPostArea" class="font-select-post">
    여기에 본문 입력
  </div>

</div>

위 구조에서 font-toggle-wrap은 전체를 감싸는 역할을 한다. 스타일, 라디오 버튼, 폰트 선택 박스, 실제 본문 영역이 모두 이 안에 들어간다. 이렇게 감싸두는 이유는 기능을 이 글 안에만 가둬두기 위해서다. 티스토리 전체 스킨이나 댓글, 사이드바까지 건드리고 싶지 않다면 이런 식으로 범위를 좁혀두는 편이 낫다.

.font-toggle-wrap .font-choice-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

위 코드는 실제 radio input을 화면에서 숨기는 부분이다. 라디오 버튼 자체는 보이지 않지만 기능은 살아 있다. 독자가 보는 것은 버튼처럼 꾸며진 label이고, 그 label을 누르면 연결된 radio input이 선택된다. 이 방식 덕분에 JavaScript 없이도 선택 상태를 만들 수 있다.

#fontDosChoice:checked ~ #fontSelectPostArea,
#fontDosChoice:checked ~ #fontSelectPostArea p,
#fontDosChoice:checked ~ #fontSelectPostArea span,
#fontDosChoice:checked ~ #fontSelectPostArea div,
#fontDosChoice:checked ~ #fontSelectPostArea b,
#fontDosChoice:checked ~ #fontSelectPostArea strong,
#fontDosChoice:checked ~ #fontSelectPostArea u,
#fontDosChoice:checked ~ #fontSelectPostArea ins,
#fontDosChoice:checked ~ #fontSelectPostArea mark,
#fontDosChoice:checked ~ #fontSelectPostArea ul,
#fontDosChoice:checked ~ #fontSelectPostArea ol,
#fontDosChoice:checked ~ #fontSelectPostArea li {
  font-family: 'DosStory', serif !important;
}

#fontCafeChoice:checked ~ #fontSelectPostArea,
#fontCafeChoice:checked ~ #fontSelectPostArea p,
#fontCafeChoice:checked ~ #fontSelectPostArea span,
#fontCafeChoice:checked ~ #fontSelectPostArea div,
#fontCafeChoice:checked ~ #fontSelectPostArea b,
#fontCafeChoice:checked ~ #fontSelectPostArea strong,
#fontCafeChoice:checked ~ #fontSelectPostArea u,
#fontCafeChoice:checked ~ #fontSelectPostArea ins,
#fontCafeChoice:checked ~ #fontSelectPostArea mark,
#fontCafeChoice:checked ~ #fontSelectPostArea ul,
#fontCafeChoice:checked ~ #fontSelectPostArea ol,
#fontCafeChoice:checked ~ #fontSelectPostArea li {
  font-family: 'Cafe24SsurroundAir', sans-serif !important;
}

위 코드는 폰트 전환의 핵심이다. #fontDosChoice:checked는 도스이야기체 라디오 버튼이 선택된 상태를 뜻하고, #fontCafeChoice:checked는 써라운드 에어체 라디오 버튼이 선택된 상태를 뜻한다. 그 뒤에 붙은 ~ #fontSelectPostArea는 같은 부모 안에서 뒤에 있는 본문 영역을 가리킨다. 그래서 radio input이 반드시 본문 영역보다 위에 있어야 한다. 순서가 틀어지면 CSS가 알아서 찾아주지 않는다. 그냥 안 된다.

.font-select-post span[style*="font-family"],
.font-select-post span[style*="color"],
.font-select-post span[style*="background-color"] {
  font-family: inherit !important;
}

위 코드는 티스토리 에디터가 자동으로 만드는 span 때문에 폰트 전환이 깨지는 걸 막는 부분이다. 티스토리에서 색을 넣어도 span이 생기고, 형광펜을 넣어도 span이 생기고, 폰트를 한 번 건드려도 span이 생긴다. 그런데 그 span 안에 특정 font-family가 박혀 있으면 바깥에서 폰트를 바꿔도 안 먹을 수 있다. 그래서 font-family가 들어간 span도 부모 폰트를 따라가게 처리했다.

<p class="line-note-only-pc" data-ke-size="size16">
  <span style="font-family: inherit;">
    여기에 본문을 입력한다.
    <u>밑줄도 넣을 수 있고</u>,
    <span style="background-color: #f6e199;">형광펜 효과도 넣을 수 있다</span>.
  </span>
</p>

위 구조를 반복하면 실제 본문을 계속 추가할 수 있다. 문단마다 p를 만들고, 그 안에 span을 넣고, span에는 font-family: inherit을 넣는다. 밑줄은 u 태그로 넣고, 형광펜은 span에 background-color를 넣으면 된다. 귀찮긴 한데, 티스토리에서 폰트 선택 기능을 안정적으로 굴리려면 이 정도 번거로움은 거의 필수다.

.font-select-post p.line-note-only-pc {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(2em - 1px),
    var(--note-line-color) calc(2em - 1px),
    var(--note-line-color) 2em
  );
  background-size: 100% 2em;
  padding: 20px;
  box-sizing: border-box;
}

위 코드는 PC 화면에서 줄 노트 효과를 만드는 부분이다. line-note-only-pc 클래스를 붙인 문단에는 노트 줄처럼 배경선이 들어간다. 줄 간격을 2em 기준으로 맞춰두었기 때문에 본문 line-height와 같이 움직인다. 이런 효과는 PC에서는 꽤 보기 좋지만, 모바일에서는 화면이 좁아서 오히려 답답해질 수 있다.

@media screen and (max-width: 768px) {
  .font-select-post p.line-note-only-pc {
    background-image: none !important;
    padding: 0 !important;
  }
}

위 코드는 모바일에서 줄 노트 효과를 제거하는 부분이다. PC에서는 padding이 있어야 줄 노트가 보기 좋은데, 모바일에서는 그 padding이 오히려 답답하게 보일 수 있다. 그래서 모바일에서는 배경선을 빼고 padding도 0으로 돌렸다. PC에서 예쁜 게 모바일에서도 예쁘다는 보장은 없다.

.font-select-post p {
  font-size: var(--post-font-size-pc) !important;
  line-height: var(--post-line-height-pc) !important;
  text-align: justify !important;
  text-justify: inter-word;

  word-break: keep-all;
  overflow-wrap: break-word;
  white-space: normal;

  margin: 0 0 28px 0;
}

위 코드는 기본 본문 문단 설정이다. PC 기준으로 글자 크기 17px, 줄 간격 2em, 양쪽 정렬을 사용한다. word-break는 keep-all로 두고, overflow-wrap은 break-word로 둔다. 한글 문단을 최대한 자연스럽게 유지하면서도 너무 긴 단어나 주소가 들어왔을 때 화면을 뚫고 나가지 않게 하기 위한 설정이다.

/* =========================================================
  모바일 조정

  - 모바일에서도 본문 양쪽 정렬 유지
  - 줄노트는 모바일에서 제거
  - 리스트는 모바일에서도 왼쪽 정렬 유지
========================================================= */
@media screen and (max-width: 768px) {
  .font-select-post p {
    font-size: var(--post-font-size-mobile) !important;
    line-height: var(--post-line-height-mobile) !important;

    text-align: justify !important;
    text-align-last: left !important;
    text-justify: inter-word;

    letter-spacing: -0.02em !important;
    word-spacing: -0.04em !important;

    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    white-space: normal;

    margin: 0 0 26px 0;
  }

위 코드는 모바일 화면에서 적용되는 설정이다. 모바일에서도 본문 양쪽 정렬은 유지하되, 화면 폭이 좁아지면서 단어 사이가 과하게 벌어지는 것을 줄이기 위해 letter-spacing과 word-spacing을 조금 줄였다. 그리고 word-break는 break-all로 두었다. 이렇게 하면 줄 끝에서 글자가 더 적극적으로 나뉘기 때문에 문단이 화면 안에 조금 더 촘촘하게 들어온다. 대신 한글 단어가 중간에서 잘릴 수 있다는 단점은 있다. 그래도 이번 설정에서는 모바일에서 빈 공간이 크게 벌어지는 것보다 문단이 조금 더 꽉 차 보이는 쪽을 우선했다.

<ul style="list-style-type: disc;" data-ke-list-type="disc">
  <li><span style="font-family: inherit;">기본 폰트는 도스이야기체로 시작한다.</span></li>
  <li><span style="font-family: inherit;">독자가 선택하면 카페24 써라운드에어체로 바꿀 수 있다.</span></li>
  <li><span style="font-family: inherit;">본문 span은 특정 폰트를 고정하지 않고 inherit으로 처리한다.</span></li>
  <li><span style="font-family: inherit;">코드블럭은 고정폭 폰트로 유지한다.</span></li>
  <li><span style="font-family: inherit;">PC에서는 줄노트를 유지하고 모바일에서는 제거한다.</span></li>
</ul>

위 코드는 리스트를 넣을 때 쓰는 구조다. li 안에도 span style="font-family: inherit;"을 넣어두면 본문 폰트 선택을 그대로 따라간다. 글 안에 목록을 넣었을 때 갑자기 기본 폰트로 튀면 보기 싫기 때문에 ul, ol, li도 font-select-post 안에서 같이 잡아두었다.

정리하면 이 방식은 티스토리 글쓰기 에디터 안에서 JavaScript 없이 폰트 선택 기능을 넣는 방법이다. 핵심은 세 가지다. 첫째, 전체를 하나의 div로 감싸서 이 글 안에서만 작동하게 만든다. 둘째, radio input과 label을 이용해서 CSS만으로 폰트를 바꾼다. 셋째, 본문 안 span에는 특정 폰트명을 직접 박지 말고 inherit을 사용한다.

물론 이게 모든 티스토리 스킨에서 100% 똑같이 작동한다고 장담할 수는 없다. 티스토리는 에디터 화면, 미리보기 화면, 발행 화면, 모바일 화면이 서로 다르게 나올 때가 있다. 그래서 최종 확인은 반드시 발행 후 실제 PC 화면과 모바일 화면에서 해야 한다. 미리보기에서 안 된다고 무조건 실패도 아니고, 미리보기에서 된다고 무조건 성공도 아니다. 귀찮지만 확인해야 한다. 티스토리에서 뭔가를 직접 건드린다는 건 원래 그런 일이다.