블로그 꾸미기 - 리디바탕체 적용하기

블로그에 다른 폰트를 적용하고 싶다면?

제목은 리디바탕체 적용하기라고 적었지만, 블로그 꾸미기에 해당될 것 같습니다. 많은 사람들의 블로그와 조금은 달라 보이고자 다른 스킨을 사용하기도 하고, 글꼴도 바꾸지 않나요? 그 중, 가독성이 좋기로 평이 좋은 글꼴인 리디바탕체를 적용하는 방법에 대해 적어 보고자 합니다.

 

일반적인 적용 방법

글꼴 파일을 직접 다운로드 받아서, 티스토리에 업로드하는 방법과 CDN에서 다운로드 하도록 하는 방법이 있는데, 저는 후자를 우선 택하고자 합니다. 평소 스킨 편집할 때와 마찬가지로,

스킨편집 > html 편집 > CSS를 선택합니다.

    @font-face {
        font-family: "RIDIBatang";
        font-style: normal;
        font-weight: 400;
        src: 
            url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/RIDIBatang.woff') format('woff');
    }

스킨마다 다를텐데, font-face라고 선언된 부분들이 몇 군데 있을 수 있다. 위의 코드를 적어 넣으면 이후 font-family라고 지정된 부분을 RIDIBatang으로 변경해 줘서, 기존 글꼴 대신 리디바탕체로 적용할 수 있게 됩니다. 예를 들어, 나눔고딕이 기본 폰트로 사용되고 있다면, Nanum Gothic이라고 되어 있는 부분을 모두 찾아서, RIDIBatang으로 변경해 주면 됩니다.

JB-167에서의 적용 방법

JB-167 스킨은 여러 폰트를 쉽게 변경할 수 있는 기능을 제공합니다. 물론, 위에서 소개한 것처럼 일반적인 적용 방법을 사용해도 되지만, 직접 변경해줘야 하는 수고로움이 너무 큽니다. JB-167 스킨의 index.html에도 다른 폰트를 임의로 등록해줘서 정식 메뉴에서부터 선택도 가능하게 변경하는 방법도 있겠지만, 블로그에 사용하는 폰트는 보통 한 번 설정하면 자주 바꾸지는 않기 때문에, 이 점을 편법적으로 사용하는 방법을 적어 보고자 합니다.

저는 기존에 이롭게바탕체를 쓰도록 설정을 했었습니다. 따라서, 이롭게바탕체를 선택할 경우, 리디바탕체가 선택되도록 변경할 것입니다.

 

이롭게바탕체 주석처리

    @font-face {
        font-family: "Iropke Batang";
        font-style: normal;
        font-weight: 400;
        src: url( "https://cdn.jsdelivr.net/gh/jbfactory/jb-skin-fonts/fonts/IropkeBatangM.woff" ) format( "woff" );     
    }

라고 되어 있는 부분을 찾아서, 아래와 같이 주석 처리 해줍니다. (나중에 다시 쓸 수도 있으므로)

/*
    @font-face {
        font-family: "Iropke Batang";
        font-style: normal;
        font-weight: 400;
        src: url( "https://cdn.jsdelivr.net/gh/jbfactory/jb-skin-fonts/fonts/IropkeBatangM.woff" ) format( "woff" );
    }
*/

즉, 기존 코드의 앞뒤에 /* 코드 */ 와 같이 붙여주면 됩니다.

 

이롭게바탕체 이름으로 리디바탕체 등록하기

이름은 그대로 이롭게바탕(Iropke Batang)을 유지하되, 아래 부분의 주소를 바꿔줍시다.

    @font-face {
        /* RIDIBatang */
        font-family: "Iropke Batang";
        font-style: normal;
        font-weight: 400;
        src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/RIDIBatang.woff') format('woff');
    }

이 방법으로 하면, 굳이 다른 HTML body나 CSS 부분을 하나하나 찾아다니면서, RIDIBatang이라고 변경해 주지 않아도 될 것입니다.

 

참고

본 글꼴은 아래 원문 사이트에 소개된 글꼴을 적용하였습니다.

https://noonnu.cc/font_page/324