워드프레스에 Nanum Gothic Coding 고정폭 폰트 적용하기

IT에 종사하는 사람, 특히 프로그래머와 같은 1바이트 문자를 많이 사용하는 이에겐 고정폭 폰트와 가변폭 폰트는 가독성을 자지 우지하는 요소로 작용될 수 있다.

따라서 1바이트 문자 (알파벳, 숫자, 특수문자)의 가독성을 위해서 고정폭 폰트를 적용하는 방법에 대해서 알아본다. 추가적으로 에디터의 폰트를 변경하는 방법도 알아보자.

 

0. 적용하기 전에

먼저 고정폭/가변폭의 차이점에 대해 알아보기 위해 아래 글자열들을 확인해 보자.

5b8b8a6681eef7f8b9588bcdab0642f052e08517
5c190e7c9c26dae43501f4c9c7c962370094ab4d
5cd3e248686b5a7d70c9be1a383b87d5b465b604
5d91bf597bda840117c84145fcaaf6f86c80244e
5ebad75370cfa881b95a802021e6121d7af1826b
5ee930a9e5b99fcb9092b8a57fce0ef0e552d8d0
6033733ded3dc6fce815ca256163230cc902f0cc
6306f4ee52101a2fa9732651a8f76635005dd482

오른쪽 끝 지점이 모두 똑같이 끝이 난다.

본 블로그의 폰트는 고정폭 폰트(Nanum Gothic Coding)를 적용하였기 때문에 화면상에 그렇게 출력이 되는 것이다.

2020.06.24 에 폰트를 '나눔바른고딕'으로 변경을 하였다.

따라서 기존에 아래 처럼 고정폭으로 보이던 글자가 이제는 가변폭으로 보인다. (위의 해시코드 처럼..)

코드나 쉘의 출력물은 코드블록을 사용하기 때문에 고정폭 폰트를 사용하지 않아도 되서 미려한 가변폭 폰트로 변경하였다.

아래와 같이 Custom CSS 적용 중

@import url("https://cdn.jsdelivr.net/gh/moonspam/NanumBarunGothic@latest/nanumbarungothicsubset.css");
body, h1, h2, h3, h4, h5, h6, p, a, p, div, span, ul, li { font-family: 'NanumBarunGothic', sans-serif; }

[참고]
https://github.com/moonspam/NanumBarunGothic

 

만약 가변폭 폰트(Nanum Gothic)를 적용하였다면 똑같은 문자들인데 아래와 같이 출력이 될 것이다.

행간의 글자수는 동일하지만 글자의 조합이 달라 폭이 들쭉날쭉하다.

 

가변폭 폰트는 글자별로 폭이 다르다. 즉, 예를 들어 알파벳 소문자 l과 대문자 L의 폭이 서로 다르다는 것이다. 하지만 2바이트 문자를 사용하는 한중일(한국,중국,일본)의 문자는 조합형태의 문자이다 보니 고정폭 폰트가 아니어도 한글자의 폭이 거의 동일하거나 차이가 크지 않다. 그런데 알파벳/숫자/특수 문자와 같은 컴퓨터와 직접 관련되는 문자는 1바이트 문자이다보니 가변폭 폰트를 사용하면 위의 예처럼 같은 길이의 해쉬값도 육안으로 보기에 길이가 같아 보이지 않는 것이다. MS Windows에 기본 제공되는 굴림/굴림체, 궁서/궁서체, 돋음/돋음체의 경우 '체'가 붙은 폰트는 고정폭, 안 붙은 폰트는 가변폭 폰트다. 주로 사용되는 맑은고딕은 '체'가 붙은 고정폭을 제공하지 않는다.

그럼 그냥 고정폭으로 통일하지 왜 구지 가변폭을 두는 것일까? 이유는 가변폭 폰트가 더 미려하고 가독성(코드의 가독성과는 다른)이 좋기 때문이라고 한다. 일반적으로 폰트들을 보면 가변폭 폰트의 종류가 더 많다. 그렇지만 IT 종사자에겐 아날로그적인 심미성보다는 정교함이 더 필요하기 때문에 고정폭이 더 적합하다고 할 수 있다.

 

1. 고정폭 폰트 선별

그럼 이제 IT 블로그에 어떠한 방법으로 고정폭 폰트를 적용할지 알아보자.

고려 대상은 아래와 같다.

1. 한글을 제대로 지원한다.
2. 가독성과 심미성이 좋아야 한다.
3. 알파벳 소문자 l(엘), 대문자 I(아이), 숫자 1과 같은 글자도 구분이 잘 되어야 한다.

위 고래 대상으로 고정폭을 지원하는 폰트를 몇 가지 선별해 보면,

NHN(네이버)에서 제공하는 D2 Coding과 Nanum Gothic Coding이 가장 적합하다고 생각한다.

 

2. D2 Coding

NHN에서는 D2 Coding을 Web Font로는 제공하지 않고 있지만, 김정균 씨께서 D2 Coding 폰트를 Web Font화해서 배포하고 계신다.

최근 NHN에서 해당 폰트를 Ver 1.3을 발표하였고 김정균씨도 그 버전에 맞춰 웹폰트를 제공하고 있다.

2.1. 폰트 다운로드

해당 폰트를 다운로드하고 압축을 풀어 자신의 블로그 웹서버의 적당한 디렉터리에 올려 둔다.

다운로드 경로 : https://github.com/Joungkyun/font-d2coding/releases

2.2. 플러그인 설치

Google Fonts 플러그인 설치하고 활성화 한 후 관리자 페이지에서 Google Fonts 설정으로 들어간다.

2.3. 설정하기

- Font 1 부분의 3. Custom CSS (optional): 부분만 위와 같이 폰트의 CSS가 위치한 자신의 블로그 웹서버의 url 과 부수적인 부분을 선언해 준다. 아래에 텍스트와 동일한 내용이다.

     @import url("http://mapoo.net/font/d2coding.css" ) ;
body, h1, h2, h3, h4, h5, h6, li, p { font-family: 'D2 coding', serif; }

• font-family는 d2coding.css 파일의 내용을 확인해 보면 적혀 있는 내용을 적어준다. 해당 폰트는 D2 coding으로 선언되어 있다.

기입한 후에 Save All Fonts 버튼을 눌러서 적용시킨다.

 

아래는 D2 coding 폰트가 적용된 모습이다.

 

3. Nanum Gothic Coding

3.1. 설정하기

해당 폰트는 google api 형태로 제공해 주고 있기 때문에 블로그 웹서버에 저장해 둘 필요도 없이 그냥 선언만 해주면 된다.

     @import url("http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css" ) ;
body, h1, h2, h3, h4, h5, h6, li, p { font-family: 'Nanum Gothic Coding', serif; }

- 위에서 D2 Coding 폰트를 적용하듯이 블로그 관리자 페이지에서 Google Fonts 설정에서 Font 1 부분의 3. Custom CSS (optional) 에 위와 같이 적어주고 적용한다.

- 보다시피 url 이 google api 서버다.

 

아래는 Nanum Gothic Coding 폰트가 적용된 모습이다.

 

본인 블로그는 현재(2017.12.13 기준) Nanum Gothic Coding 폰트가 적용되어 있는 상태다.

D2 Coding 폰트도 나쁘지 않으나 글자가 좀 두꺼워서 글자 두께가 적당한 Nanum Gothic Coding을 선택하였다.

 

참고로 나눔고딕을 적용하고자 한다면 아래와 같이 추가해 주면된다. 하지만 해당 폰트는 가변폭이다.

     @import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css" ) ;
body, h1, h2, h3, h4, h5, h6, li, p { font-family:"Nanum Gothic" !important ; }

 

4. Tiny MCE Editor의 폰트 적용

4.1. 기본 폰트 변경

# vim /home/web/wp-includes/js/tinymce/skins/wordpress/wp-content.css

body {
    //font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
    font-family: 나눔고딕코딩;

--> 기존 폰트 Family는 주석처리하고 '나눔고딕코딩'을 넣어 준다. 그리고 편집하는 PC에도 해당 나눔고딕 폰트가 설치되어 있어야 한다.

나눔 바른 고딕으로 변경 시

//  font-family: Georgia, "Times New Roman", "Bitstream Charter", Times, serif;
    font-family: "NanumBarunGothic", sans-serif;

또는 나눔 고딕으로 변경 시

    font-family: "Nanumgothic", "Nanum gothic", sans-serif;

 

4.2. Editor 폰트 리스트 변경

위와(4.1.) 같이 적용하면 TinyMce Editor의 기본 폰트만 변경되고 에디터의 폰트 리스트는 변경되지 않는다.

Tiny MCE Editor의 폰트 리스트도 변경하고 싶으면 Tiny MCE Config 플러그인을 설치하고 설정해 주면 된다.

설치하고 활성화 후 아래와 같이 자신에 맞는 폰트 리스트를 넣어 주면된다.

굴림체=Gulim;돋움체=Dotum;바탕체=Batang;궁서체=Gungsuh;나눔고딕=nanumgothic;나눔바른고딕=nanumbarungothic;나눔붓글씨=nanumbrushscript;Andale Mono=andale mono,times;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol; Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Trebuchet MS=trebuchet ms,geneva;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings

 

적용 후 아래와 같이 폰트 리스트에 자신이 지정한 폰트 리스트가 확인된다.

-> 브라우저 캐시 때문에 변경 사항 반영이 늦을 수 있다. 캐시를 비우거나 다른 브라우저나 PC에서 확인해 보면 바로 바뀌어 있는게 확인된다.

 

블로그뿐만 아니라 Office 프로그램으로 문서를 작성할 때에도 상황에 따라 굴림체, 돋음체와 같은 고정폭 폰트를 사용하면 문서의 가독성을 높이는데 도움이 될 수 있다.

이상으로 블로그에 고정폭 폰트를 적용하는 방법에 대해 알아봤다.