티스토리 블로그에 웹폰트 업로드하여 적용하는 방법
상업용으로도 사용 가능하고 웹에서도 사용 가능한 웹 폰트를 사용하는 방법은 크게 2가지로 나눌 수 있습니다. 하나는 이미 공개되고 공유되고 있는 웹 폰트 코드(html, css)를 활용하는 것이고 다른 하나는 직접 웹폰트를 만들어서 업로드하는 것입니다.
일전에 TTF WOFF 차이, 웹폰트 적용하는 방법 [링크]에서 한번 작성한 적이 있는데요. 웹폰트 티스토리 스킨에 업로드하여 적용하는 방법을 좀 더 자세하게 설명을 덧붙여봅니다.
목차
- 원하는 폰트 웹폰트로 변경하기
- 웹폰트 티스토리 업로드 하고 적용하는 방법
웹폰트 티스토리에 적용하기
먼저 웹폰트를 적용하기 위해서는 웹폰트가 인터넷에 업로드가 되어있어야 합니다. 무료로 이용가능한 폰트 중에서 웹폰트가 없는 ttf 폰트를 woff로 변경해서 웹폰트로 이용할 수 있는데요. 일반적으로 사용하는 ttf 폰트 파일을 웹폰트 woff로 변경하는 방법은 아래와 같이 진행할 수 있습니다.
원하는 폰트(ttf) 웹폰트(woff)로 변경하는 방법
예시로 윤디자인에서 민국체를 2019년 광복절 기념 이벤트로 무료 배포하였었는데요. 이와같이 무료로 이용할 수 있는지 라이센스 확인을 거치신 후 웹에 게시해도 되는 웹폰트로 직접 업로드해보려고 합니다. ttf -> woff으로 변경해주는 사이트가 많기 때문에 편하신 곳을 이용하면 됩니다. 저는 웹폰트 변경 사이트로 https://www.fontsquirrel.com/tools/webfont-generator를 이용하였습니다.
▲ [upload fonts]를 클릭하여 원하는 폰트를 선택합니다. 선택 후 Yes, the font's I'm uploading are legally eligible for web embedding.을 체크 표시한 후 [Download your kit]를 클릭합니다.
▲ 기다리면 zip 파일이 완성되어 다운이 됩니다. 다운된 zip 파일 압축을 해제합니다. 파일을 열어보면 stylesheet파일, woff파일, woff2 파일을 확인하실 수 있습니다.
웹폰트 티스토리 업로드 하고 적용하기
▲ (1) zip 파일을 압축 해제하여 나온 웹폰트 변형 폴더에서 woff와 woff2 파일을 티스토리 html 편집으로 들어가서 [파일업로드]에서 파일을 업로드합니다. 웹폰트 스타일 시트도 같이 업로드를 합니다.
▲ (2) 업로드한 웹폰트 파일 위에서 마우스 우클릭을 하여 [링크 주소 복사]를 클릭합니다. 웹폰트 파일을 2개 올렸기 때문에 2개를 복사하여 메모장에 붙여넣기 해보았습니다.
링크 주소 복사 url 예시)
https://tistory3.daumcdn.net/tistory/1234/skin/images/yoonmingukb.woff https://tistory3.daumcdn.net/tistory/1234/skin/images/yoonmingukb.woff2
@font-face {
font-family: 'yoon_mingukbold';
src: url('yoonmingukb.woff2') format('woff2'),
url('yoonmingukb.woff') format('woff');
font-weight: normal;
font-style: normal;
}
▲ (3) 웹폰트 폴더에 같이 있는 stylesheet(스타일시트) 파일에 업로드 된 font-face css 코드를 복사하여 메모장에 붙여넣기 합니다.
src: url('woff2 링크 주소 복사 붙여넣기') format('woff2'),
url('woff 링크 주소 복사 붙여넣기') format('woff');
@font-face {
font-family: 'yoon_mingukbold';
src: url('https://tistory3.daumcdn.net/tistory/1234/skin/images/yoonmingukb.woff') format('woff2'),
url('https://tistory3.daumcdn.net/tistory/1234/skin/images/yoonmingukb.woff2') format('woff');
font-weight: normal;
font-style: normal;
}
▲ (4) url('URL 링크 주소 복사 붙여넣기')를 합니다. format을 확인하시고, woff에는 woff 주소를 붙여넣고, woff2주소는 woff2에 맞춰서 붙여넣기를 합니다.
▲ (5) 수정한 내용을 티스토리 블로그 css에 붙여넣기 합니다.
css에 woff파일과 같이 업로드한 css 파일 주소(url)를 복사하여 @import url("css파일 주소");도 추가힙니다.
예시)
@import url("https://tistory2.daumcdn.net/tistory/1234/skin/images/stylesheet.css");
▲ 원하는 곳의 font-family에 추가하거나 변경합니다. font-family: 'yoon_mingukbold';는 zip파일에 함께 있던 css파일에서 설정된 font-family를 추가하시면 됩니다.
웹폰트 티스토리 스킨에 직접 업로드하여 적용하는 방법에 대해서 정리해보았는데요. 위와 같이 url를 직접 입력해도 되고, ./image/파일명.확장자와 같이 줄여서 사용해도 적용됩니다. font-family와 파일 이름이 같아이 적용되는 것 같은데요. 도움이 되셨길 바랍니다.