폰트는 개인별 호불호가 다 틀리며, 개인적으로 윈도우 기본 폰트인 '맑은고딕'보다는 '본고딕'을 선호한다. '본고딕'을 선호하는 이유는 다른 폰트보다 가독성이 좋고 힌팅(Hinting)이 적용되어 기존 폰트보다 더 깔끔하게 글자가 표현된다. 힌팅에 대한 자세한 설명은 아래 글을 참고하면 된다.
RightBrain lab - 라이트브레인 블로그
RightBrain lab은 라이트브레인만의 UX 인사이트와 소중한 현장 경험들을 함께 나눔으로써 서로간의 성장을 돕고 꾸준히 공부해 가는 열린 소통의 장입니다.
blog.rightbrain.co.kr
고래스킨 4.0의 기본 폰트는 맑은고딕으로 설정되어 있으며, 이것을 본고딕으로 변경하면 된다. 하지만 웹폰트인 본고딕은 웹 페이지에 접속할 때마다 웹폰트를 다운받아 설치하기 때문에 '경량화된 본고딕' 설치하도록 한다.
위 GitHub에서 NotoSansKR-Hestia.css 파일을 다운받아 images 디렉토리에 업로드하고 하기의 변경사항을 적용하면 본고딕이 적용된다.
diff -Nura "GoraeSkin 4.0_Origin/skin.html" "GoraeSkin 4.0_Custom/skin.html"
--- "GoraeSkin 4.0_Origin/skin.html" 2020-11-01 03:34:41.000000000 +0900
+++ "GoraeSkin 4.0_Custom/skin.html" 2020-12-20 11:54:06.000000000 +0900
@@ -11,6 +11,7 @@
<link rel="alternate" type="application/rss+xml" title="기억저장소" href="https://memories.tistory.com/rss" />
<link rel="shortcut icon" href="https://memories.tistory.com/favicon.ico" />
<link rel="stylesheet" href="./style.css" />
+ <link rel="stylesheet" href="./images/NotoSansKR-Hestia.css" />
<script src="./images/jquery-3.3.1.min.js"></script>
<script src="./images/common.js"></script>
<style>
diff -Nura "GoraeSkin 4.0_Origin/style.css" "GoraeSkin 4.0_Custom/style.css"
--- "GoraeSkin 4.0_Origin/style.css" 2020-07-08 14:46:45.000000000 +0900
+++ "GoraeSkin 4.0_Custom/style.css" 2020-12-20 11:50:25.000000000 +0900
@@ -67,7 +67,7 @@
}
body,html {
- font-family: sans-serif;
+ font-family: "Noto Sans Regular", sans-serif;
scroll-behavior: smooth
}
@@ -1466,7 +1466,6 @@
.e-content.post-content p {
line-height: 30.64px;
font-size: 16px;
- font-family: "맑은 고딕",NotoKrR,'Noto Sans KR',sans-serif!important;
letter-spacing: -.75px;
position: relative;
display: block;
@@ -1817,7 +1816,6 @@
#guest-list .cng-content .speech {
line-height: 28.64px;
font-size: 14px;
- font-family: "맑은 고딕",NotoKrR,'Noto Sans KR',sans-serif!important;
letter-spacing: -.75px;
position: relative;
display: block;
@@ -1985,7 +1983,7 @@
.h-entry {
max-width: 900px;
max-height: unset;
- padding: 0px !important;
+ padding: 0px !important;
}
.h-entry .p-name a {
@@ -2202,7 +2200,6 @@
}
.e-content.post-content ol,.e-content.post-content span,.e-content.post-content ul {
- font-family: '맑은 고딕',NotoKrR,'Noto Sans KR',sans-serif;
letter-spacing: -.75px
}고래스킨 제작자가 특정 selector에 important를 사용하여 폰트를 강제한 이유가 있겠지만, 이것을 적용하면 소스코드 하일라이팅에 문제가 발생하여, 각 요소의 폰트 설정을 제거하였다. 블로그 하면서 문제가 생기면 수정을 해야 할 듯 싶다.