티스토리에서 웹폰트를 사용하여 CSS 텍스트 박스 글씨체 바꾸기

 

안녕하세요. 최근에 글 본문에 활용할 수 있는 TIP 박스 활용에 대해 공유를 해드렸었습니다. 해당 글 상자에서는 여기에 작성된 글처럼 글씨체 자체를 본문과 아예 다르게 설정을 할 수 있기도 한데요. 바로 웹폰트를 사용하는 것입니다. 이전 글에서는 방법을 몰라 제대로된 정보를 공유해드리지 못했었는데 이게 의외로 간단한 방법이었습니다. 아래의 내용을 보시고 여러분들도 따라해보시기 바랍니다.

 

웹폰트를 활용하여 텍스트 박스 글씨체 바꾸기

티스토리 블로그에는 기본 스킨이나 임의로 제작된 스킨 할 것 없이 모두 위와 같은 웹폰트가 들어가 있습니다. 해결 방법은 어렵지 않습니다. 관리자→꾸미기→스킨편집→HTML 편집→CSS로 들어가셔서 웹폰트 추가와 함께 일전에 공유해드린 TIP 박스의 CSS 코드에 관련 명령어를 입력해주기만 하면 끝입니다.

 

자, 그러면 위와 같이 @font-face로 시작하는 코드는 어디서 구하느냐? 바로 '눈누'라는 사이트에서 쉽게 구할 수 있습니다. 해당 사이트에서 제공되는 글씨체는 모두 무료로 사용할 수 있는 거 아시죠? 여기에서 글씨체마다 제공되고 있는 웹폰트를 사용하시면 됩니다.

 

눈누에서 웹폰트 긁어오기

직전의 글에서 잠깐 소개한 '소요 단풍체' 폰트로 예시를 들어 보겠습니다. 글씨체를 소개하는 페이지로 들어가면 이런 페이지가 뜨는데, 위와 같이 우측의 "웹폰트로 사용"이라고 되어 있는 부분의 코드를 긁어오시면 되는 겁니다. 하지만, 제가 사용중인 글씨체의 경우 Bold(진하게) 처리가된 코드만 제공이 되는데요. 얇은 폰트를 사용하고 싶은 경우에는 해당 코드에서 일부만 수정해주면 바로 사용할 수 있습니다.

 

font-family: ;SOYOMapleBoldTTF';라고 되어 있는 부분에서 Bold→Regular로 수정하고 font-weight: 700;이라고 되어 있는 부분의 숫자를 바로 왼쪽에 보이는 400으로 변경해주면 됩니다. 폰트의 굵기가 여러 개가 있는 경우에는 이전의 글에서 소개해드린대로 폰트를 직접 다운 받으신 후 속성에서 해당 글씨체의 정확한 영어 이름을 파악하신 후에 수정하시는 것을 권장 드립니다.

 

CSS 편집 페이지에 웹폰트 넣기

CSS 편집 화면에 들어가셔서 맨 위에 보시면 @charset "utf-8";이라고 되어 있고, 그 밑에 여러가지 @font-face 코드들이 추가되어 있을겁니다. 바로 이 영역에 조금 전에 복사한 웹폰트 코드를 붙여넣기 하시면 됩니다. utf-8 바로 아래에 붙이셔도 되고, 저처럼 해당 영역의 가장 아래에 붙이면 됩니다.

 

기존 TIP 박스에 새로운 CSS 코드 추가하기

본인이 원하는 웹폰트 추가까지 마쳤다면 기존의 코드를 살짝 수정해줘야 합니다. 먼저, 코드 가장 윗 부분의 font-family: 'nanumgothic';을 삭제하시고, @keyframes bounce....라고 되어 있는 부분 바로 위쪽에 아래에서 안내해드리는 코드를 추가하시면 끝입니다.

 

아래의 코드를 넣으세요

.tipbox {
	 font-family: "SOYO Maple Regular";
	 text-rendering: optimizelegibility;
	 -webkit-font-smoothing: antialiased;
	 -moz-osx-font-smoothing: grayscale;
}

저와 같은 글씨체(소요 단풍체)를 사용하고자 하시는 분들은 그대로 추가하시면 됩니다. 다른 글씨체를 사용하고자 하는 분들은 원하는 글씨체의 웹폰트를 CSS 편집 화면의 가장 상단 영역에 추가하시고, 위 코드에서 SOYO Maple Regular라는 글씨를 지우고(글씨만) 원하는 글씨체의 영어 이름을 넣으시면 됩니다. 글씨체의 영어 이름을 확인하는 방법은 서두에 링크해드린 '여기에 작성된 글'을 클릭하셔서 읽어보시면 됩니다.

 

별도의 방법이 있는 것인지, 원래부터 적용이 안되는 것인지 이유는 모르겠으나, 모바일에서는 적용한 글씨체로 보이지 않는 것을 확인했습니다. 이 부분 참고하시기 바랍니다.

 

글을 마치며

처음엔 개인적으로 사용하기 위해 시작했던 것이 은근히 재밌어지기 시작하네요. 앞으로 많이 공부해서 더 예쁘고 쓸모 있게 만들테니 많은 관심 가져주세요^~^ 짧지 않은 글 읽어주셔서 감사합니다. 끝! :)