본문2의 기본서체를 본명조로 고정시키고 싶어서 직접 티스토리 코드를 보면서 방법을 찾아보기로 했다.
블로그도 거의 해본 적 없고 정보성 글을 쓰는 건 처음이라 가독성이 조금 많이 떨어질 수 있습니다...
관리자로 들어가서, 스킨 편집에 들어간다.
그러면 이런 화면이 뜨게 되는데, html 편집으로 들어가준다.
경고창이 뜨면 확인을 누르면 된다.
위 사진처럼 CSS 탭으로 들어간다.
기본적으로 내용을 쓸 때 본문2로 설정이 되어있는데, 본문2는 data-ke-size="size16" 로 되어있다.
f12로 본문2 p태그가 어떻게 되어있는지 찾고,
보이는 것처럼, css 화면에서 #article-view p[data-ke-size='size16'] 을 검색하면 된다.
★ 검색할 때에는 css 내용 입력 에디터를 한 번 클릭한 뒤에 Ctrl + F 를 누르는 것을 추천한다. (그냥 Ctrl + F 를 누르면 현재 위치하고 있는 화면에서만 검색하므로 원하는 부분이 나오지 않게 된다.)
본문2가 본명조로 나오길 원했으므로 형광펜으로 칠한 것처럼
font-family : 'Noto Serif KR'; 을 추가해줬다.
('Noto Serif KR' 이 본명조이다.)
다른 글씨체를 추가하고 싶으면, Google Fonts 를 검색해서 들어간다.
테스트로 나눔폰트를 검색해보겠다. 검색 시에는 영문으로 검색해야한다.
이렇게 Nanum으로 검색하면 폰트 목록이 뜬다.
예문 옆 Select Regular 400 이라고 적혀있는 곳을 누르면,
옆에 창 하나가 생긴다. 우리는 CSS 화면에 @import를 할 것이므로,
@import를 클릭하면 주소를 하나 준다. <style> </style> 사이에 있는
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
까지만 복사해준다.
복사한 코드를 가지고 티스토리 CSS 탭에 가서 스크롤을 맨 위로 올리면 /* Web Font Load */ 라고 주석 처리 되어있는 부분 밑에 추가해준다.
원하는 부분의 서체를 바꿀 때는 아까 코드를 가져왔던 곳에 font-family: 'Nanum Pen Script', cursive; 를 그대로 복사해서 글씨체를 고정시키고 싶은 곳에 붙여준다.
잘 되나 확인해보려고, 본문1에 해당하는
#article-view p[data-ke-size='size18'] 부분에 넣어줬다.
설정한 결과다. 본문1는 나눔 폰트로, 본문2는 본명조로 잘 설정되어있는 걸 볼 수 있다. 이렇게하면 본문1과 본문2의 기본서체가 각각 나눔 폰트, 본명조로 설정되는 것이다.