블로그 코드블럭에 네이버 D2 Coding 폰트 적용하기

 

블로그 코드블럭에 네이버 D2 Coding 폰트 적용하기

개발자들 사이에서 한글과 영문의 조화가 잘 되어, 평이 좋은 네이버 D2 Coding 폰트를 블로그에 적용해 보겠습니다.

모든 폰트를 바꾸려는 것은 아니며, 특히 코드를 인용하는 코드블럭에 한정하여 적용하려 합니다.

 

왜 D2 Coding 폰트?

일부 알파벳, 한글, 특수기호, 숫자들의 경우 구별하기 힘든 경우가 있습니다.

이를 테면, l과 1, 숫자 0과 알파벳 O 등의 경우, 폰트에 따라 구별하기 굉장히 어려운 경우가 발생합니다.

게다가 한글의 ㅣ와 ㅇ까지 섞이면 복잡도가 더 올라갈 수도 있습니다.

D2 Coding 폰트는 한글의 경우 나눔바른고딕을 기본으로 하고 있으며, 위에서 말한 혼선을 최소화 하는데 주안점을 둔 폰트입니다.

많은 개발자들이 D2 Coding 폰트를 개발툴에 사용하는 것을 추천하고 있습니다. 물론, 폰트 선택은 개인의 취향에 따르면 되긴 합니다.

D2 Coding 폰트는 OFL(Open Font License)를 준수하여, 누구나 사용할 수 있고, 또 OFL 라이센스 하에서 누구나 재배포할 수 있다고 합니다.

로컬에 D2 Coding 폰트 설치하기

공식사이트로부터 D2 Coding 폰트를 다운로드 하고 압축을 풀면 여러 파일이 나옵니다.

보통 폰트 설치는 해당 파일을 더블 클릭하면 설치 과정이 자동으로 이뤄집니다.
다운로드 받은 파일들 중, 아래 파일을 더블클릭하면 해당 폰트가 로컬에 설치 됩니다.

파일들 크기를 보면, 기본적으로 모두 4MB가 넘어갑니다.

D2 Coding 폰트의 캐릭터들은 아래왁 같이 생겼습니다.

혹시, 본 포스트를 따라 적용하고자 하는데, 잘 적용된 것인지 보려면 위의 샘플과 글자를 비교해 보시기 바랍니다.

특히, 숫자 0, 알파벳 g, 알파벳 l 등을 비교해 보면 좋을 것입니다.

 

티스토리 등 블로그에서 쓰려면?

공식 사이트에서 제공되는 폰트는 tiff 형식이고, 4.2MB 정도로 크기가 큽니다.
웹에서 쓰기에는 너무 무겁죠.

앞서 언급했듯이 모두 4MB가 넘으며, 웹페이지 로딩을 위해서 4MB를 매번 로딩해야 한다면 매우 느릴 것입니다.

그래서, 웹에서 사용하기 좋도록 최적화가 필요합니다.

 

WOFF, WOFF2 만들기

티스토리 최적화 - 글꼴(폰트) 용량 줄이기

에 소개한 바와 같이, 폰트 변환 사이트를 사용하면 tiff 원본 폰트로부터, 원하는 폰트로 쉽게 변환할 수 있습니다.

TIFF를 업로드하고, WOFF, WOFF2 등의 파일로 변환하여 파일 사이즈를 줄입니다.

TIFF 파일을 WOFF2로 변환하는 것만으로도 사이즈가 1.5MB로 줄어듭니다.

그러나, 여전히 웹용으로는 큰 것 같습니다.

 

서브셋 폰트 최적화하기

전체 셋의 글자로부터 더 다이어트하고자 한다면, 실제 사용할 가능성이 높은 글자들 위주로 폰트를 서브셋화 하면 됩니다.

아래의 절차대로 따라하면, 최적화한 폰트를 만들 수 있습니다.

블로그 폰트 다이어트 - 필요한 글자만 쓰기

서브셋으로 폰트를 최적화하니,

• WOFF: 542KB
• WOFF2: 365KB

로 크기가 더 줄어들었습니다.

폰트 업로드하기

위와 같은 절차를 거쳐서 서브셋 폰트로 변환한 파일들은 아래와 같습니다.

subset-D2Coding.woff

542.1 kB

subset-D2Coding.woff2

365.3 kB

subset-D2Codingligature.woff2

377.3 kB

subset-D2Codingligature.woff

559.8 kB

이 폰트들을 다운로드하여, 본인의 스킨편집 > html 편집 > 업로드 화면에 올려놓습니다.

 

또는 CDN 폰트사용

위 폰트들의 경로는 각각 아래와 같습니다.

아래와 같이, CSS 편집시 로컬 파일 경로를 CDN 경로로 대신 각각 바꾸면 됩니다.
https://cdn.jsdelivr.net/gh/everydayminder/assets/subset-D2Coding.woff
https://cdn.jsdelivr.net/gh/everydayminder/assets/subset-D2Coding.woff2
https://cdn.jsdelivr.net/gh/everydayminder/assets/subset-D2Codingligature.woff
https://cdn.jsdelivr.net/gh/everydayminder/assets/subset-D2Codingligature.woff2

 

CSS에 반영하기

사람마다 적용하는 방식은 다르겠지만, 기본적인 안내는 아래와 같습니다.

직접 적용할 부분에 아래와 같이 선언해주면, 해당 스타일이 적용됩니다.

.your-style {
    font-family: 'D2Coding';
    font-weight: normal;
    font-style: normal;
}

빠른 로딩을 위해, 아래와 같이 preload를 작성해 줍니다.

<link rel="preload" href="subset-D2Coding.woff2" as="font" type="font/woff2" crossorigin>

저는 JB-167 스킨을 사용하고 있고, 기본 설정에 맞춰 아래와 같이 CSS 탭에 추가해줬습니다.

/* D2Coding */
@font-face {
    font-family: "D2Coding";
    font-style: normal;
    font-weight: normal;
    src: url( "./images/subset-D2Coding.woff2" ) format( "woff2" ),
                    url('./images/subset-D2Coding.woff') format('woff');
    font-display: swap;
}

/* D2Coding */
@font-face {
    font-family: "D2Coding-ligature";
    font-style: normal;
    font-weight: normal;
    src: url( "./images/subset-D2Codingligature.woff2" ) format( "woff2" ),
                    url('./images/subset-D2Codingligature.woff') format('woff');
    font-display: swap;
}

이미지를 티스토리 서버에 업로드 했기 때문에, url 부분을 위와 같이 기록했습니다.
만약 앞서 공유한 것처럼 CDN 자원을 쓰려면 위에 공유한 CDN 폰트 경로를 대신 기록해주면 됩니다.

코드 인용 블럭에만 위의 폰트가 적용되도록 할 것이므로,

pre > code { 
    font-size: 14px;
    font-family: "D2coding" !important;
}

라고 적어주고, 적용 버튼을 누릅니다.

만약, ligature 폰트를 쓰면?

그런데, 위의 설정 부분과 파일 이름에서, ligature라는 것이 보이는군요?

ligature는 합자라는 뜻입니다. 두 개 이상의 문자를 합쳐서 하나의 글자 모양으로 표현하는 것을 말합니다.

이것이 코드 인용에 도대체 어떤 부가 가치를 부여하는지는 아래에서 실제 예제를 본다면 와 닿을 것입니다.

앞선 작업에서 ligature 폰트 파일도 업로드/ 설정했으므로, ligature 폰트를 코드 블럭에 적용하려면, 위의 CSS 선언내용을 아래와 같이 바꿔줍니다.

pre > code { 
    font-size: 14px;
    font-family: "D2coding-ligature" !important;
}

 

적용 예제 비교

현재 스킨을 기준으로, 어떻게 달라지는지 한 번 예제로 비교해 보겠습니다.

 

변경 전: 스킨 기본 폰트 사용시

D2 Coding 폰트 적용시

D2 Coding ligature 폰트 적용시

ligature로 사용하기 전과 후의 차이가 보이나요? != 와 부등호 부분, 화살표 부분 등을 비교해 보세요. 코드를 쓰는 것과 실제 화면에 보여지는 글자의 모양이 다릅니다. 본인의 기호에 따라 맞게 쓰면 될 것입니다.

 

참고

D2 Coding 폰트 공식 사이트는 아래를 참고하시기 바랍니다.

https://github.com/naver/d2codingfont