워드프레스 에디터 한글폰트 바꾸기 (Noto Sans)

맥미니 M1을 구입하고 나서 특히나 크롬브라우저가 너무나도 느려져서 사파리로 옮겼고, 솔직히 사파리는 얘들이 ‘베타’ 라고 주장이라도 하는것처럼 무척이나 빨라졌다. 뭐 빠르던 느리던 다른것보다 중요한 것은 난 사실 글을 쓸 때에 그 appearance에 신경을 많이 쓰는 것 같다. 혹자는 좀 쓸때없다고 하는데, 이건 좀 아닌것 같다. 그냥 애플명조가 기본 폰트고… 사파리에 style.css바꾸는 방법도 있지만 컴퓨터 바꿀때마다 바꾸는것도 귀찮고, 어쨌건 글 쓰는 거의 주체가 이 블로그기 때문에 그냥 파일에서 바꾸기로 했다.

나의 경우는 결론적으로 워드프레스의 ‘블록 에디터’가 위처럼 나온다. Noto Sans폰트를 기본으로 하고 있다.

https://fonts.google.com/specimen/Noto+Sans+KR?query=noto+sans+kr

여기에 접속한 후, “Select this style” 과 @import를 통해서 코드를 얻을 수 있다.

그럼 이제 이 @import url 어쩌구를 wp-content/themes/<테마이름>/style.css 에다 추가하면 된다.

이제 사용할 준비가 됬다. 우선 워드프레스 에디터(블록 에디터 혹은 구텐베르크 에디터)에서 “제목”의 글꼴부터 바꿔본다.

에디터의 제목 폰트 바꾸기

찾아보니 .editor-post-title .editor-post-title__input 을 바꾸면 되는것 같다. grep으로 텍스트 검색을 해본다.
grep -rnw './' -e '.editor-post-title .editor-post-title__input'

한참걸린다. 그래서 그냥 wp-includes폴더에서 찾아본다.

몇 가지 결과가 나왔다. 아마도 wp-includes/css/dist/editor/style.min.css 파일내에 있는 것 같다. 뭐 style.css, style-rtl.css style-rtl.min.css 등의 파일에도 있지만 몇번 테스트 해보니 style.min.css파일이 맞다. vim style.min.css로 열어본다.

슬래시(/)로 문자검색을 한다.
찾았다 이놈.. font-family를 ‘Noto Sasns KR’, sans-serif로 바꿔준다. (기본은 inherited) 그럼 끝!

에디터의 내용 부분 줄간격과 폰트 변경

일단 내가 이걸 시작한 이유는 보는것처럼 줄간격때문에 가독성이 너무너무너무나도 떨어져서.. 보니깐 line-height가 역시나 inherited로 되어있었다. 허메.. 이건 생각보다 금방 찾았는데, \wp-includes/css/dist/block-library/reset.min.css 파일의 가장 첫줄에 있다.
여기서 font-family를 Noto Sans KR로 바꾸고, line-height를 2정도로 주면 된다.