티스토리에 폰트 직접 업로드해서 적용하기

서버에 폰트 직접 업로드를 해봅시다.

 

티스토리에 폰트를 똑똑하게 적용하기 위한 방법을 공부하다 보니 내용이 계속 꼬리에 꼬리를 물고 여기까지 왔습니다. 지난 시간에 함께 살펴본 '최적화 방법'과 '추가로 조사한 내용'으로 직접 티스토리에 웹폰트 업로드하여 적용하는 방식을 소개하겠습니다.

• 1탄: 티스토리 전체 폰트 순식간에 바꾸는 방법(기초편)
• 2탄: 티스토리 웹폰트가 무거워요! 최적화 방법은?(개념편)
• 3탄: 티스토리에 폰트 업로드해서 설정하기(적용편)
• 4탄: 티스토리에 기본폰트(노토산스, 나눔고딕) 적용하기(실전편)

오늘 소개하는 '사이트에 직접 폰트를 업로드'하는 방법은 속도에 유리한 방법입니다.

단, 티스토리의 기본 폰트(본고딕-NotoSans, 나눔 고딕, 본명 조, 궁서)는 이미 티스토리에 폰트가 탑재되어 있기 때문에 탑재되어 있는 url을 활용해도 됩니다. 이 방법은 다음 시간(4탄)에 소개하도록 하겠습니다.

 

 

티스토리에 폰트 파일 직접 업로드해서 적용하는 방법

---

1. CDN와 파일 업로드 중 뭐가 좋을까?

웹폰트를 로딩하는 방법으로는 타사이트에 탑재된 웹폰트 주소(구글 폰트 사이트 등)를 사용해 로딩하는 방법(CDN 방식)과 사이트에 직접 웹폰트 파일을 업로드한 후 로딩하는 방법이 있습니다. CDN이란, Content Delivery Network의 약자로 전 세계의 다양한 사용자에게 파일을 전송하는 기술을 말합니다.

• CDN 방식 : 속도는 제공 사이트 마다 상이 / 트래픽 부담 없음 
• 직접 파일 업로드 : 속도가 안정적 / 트래픽 부담 있음

위처럼 직접 파일을 업로드하여 사용하는 방식이 속도는 더 안정적이라고 합니다. 또한 우리가 많이 사용하였던 CDN 방식은 제공하는 서버가 불안정할 경우 로딩되지 않기도 합니다. 하지만 트래픽 부담의 문제가 있었기에 고민하고 있었습니다. 점점 그래도 간편한 CDN 방식으로 유지하자라고 마음먹던 차에 하나의 계기가 발생하였습니다.

 

 

2. 구글 폰트 사이트 Noto sans의 확장자는 woff2

제가 구글 웹폰트 사이트에서 사용하던 폰트는 Noto sans KR입니다. 지난 시간에 woff2나 woff 확장자의 경우 폰트 용량이 적어서 블로그 속도 최적화에 도움이 된다는 이야기를 하였습니다. 그렇다면 지금 사용 중인 Noto san KR의 확장자가 무엇인지 궁금한 마음에 확인해 보았습니다. 

이럴수가! 구글 웹폰트의 Noto sans KR은 모두 woff2 확장자입니다.

구글 폰트 사이트에서 @import로 제공되는 코드의 url을 들어가 보면 위와 같이 확장자 woff2를 확인할 수 있습니다. woff2 형식의 폰트는 익스플로러(IE)에서는 작동하지 않기 때문에 익스플로러에서는 이 글씨체가 보이지 않는다는 것을 그제야 알게 되었습니다. 실제 익스플로러로 잇 플래닛 사이트를 들어가 보니 다른 글씨체로 보이는 것을 확인할 수 있었습니다. 제가 지정한 폴백 폰트였지만 그래도 아쉬운 마음이 들었습니다.

 

게다가 구글 폰트 사이트에서 제공하는 Noto Sans KR은 모든 두께의 글씨체를 로딩합니다. 다양한 두께로 섬세하게 사이트를 구성하기에는 좋겠지만, 큰 용량으로 속도에서는 불리함이 큽니다.

 

이로써 결국 직접 사이트 서버에 폰트 파일을 업로드하여 폰트를 적용하는 방식을 도전해보기로 하였습니다. 특히 woff2 파일과, IE에서도 지원이 되고 용량도 적은 woff 파일도 함께 탑재하기로 결심하였습니다.

* 단, woff는 IE9 이상에서 지원됩니다.

* 용량은 일반적으로 woff2 < woff < ttf < eot <svg입니다. (용량이 적을수록 로딩 속도가 빠름)

* 이때는 티스토리에 기본 폰트로 NotoSans(본고딕)을 제공한다는 사실을 잊고 진행하였습니다. 즉, 블로그에 폰트를 직접 탑재하여 제공하는 이 방식은 티스토리 '기본 폰트가 아닌 폰트'에 추천합니다.

 

 

3. 구글 웹폰트 헬퍼에서 폰트 다운로드하기

구글 폰트 사이트에서 폰트 파일을 다운로드하면 otf 확장자 파일입니다. 따라서 구글 웹폰트 헬퍼 사이트에서 원하는 확장자인 woff로 파일을 다운로드하고자 합니다.  

korean과 원하는 두께를 체크합니다.

Noto sans KR을 검색하여 위와 같이 체크한 후 화면 스크롤을 내려서 Download files의 zip 파일 이름으로 된 버튼을 클릭합니다. 압축을 풀어서 다양한 확장자의 폰트 파일 중에서 woff 확장자 파일을 준비합니다. (저는 세 종류의 두께를 고민하다가 결국 regular=400, 700을 선택하였습니다.)

 

 

4. 티스토리 내 서버에 폰트 파일 업로드

이제 서버에 폰트 파일을 업로드하겠습니다. 파일명은 제가 짧게 수정하였습니다.

파일명은 제가 수정하여 탑재하였습니다.

[블로그 관리 홈] > [스킨편집] > [html편집] > [파일업로드] >[추가] 

위 순서대로 클릭하여 다운로드한 폰트를 선택하면, 서버에 폰트가 탑재된 것을 볼 수 있습니다. (단, 서버에서 용량을 차지하기 때문에 두께별로 폰트를 모두 탑재하기에는 어려움이 있습니다.)

 

 

5. CSS 수정하기

구글 웹폰트 헬퍼 사이트에서 제공하는 CSS를 활용하여 아래와 같이 CSS에 입력하고자 합니다. 

/* noto-sans-kr-400 */
@font-face {
  font-family: 'Noto Sans KR';
  font-weight: 400;
  src: url('../image/noto-sans-kr.woff2') format('woff2'), 
       url('../image/noto-sans-kr.woff') format('woff'), 
    /* format 설정으로 해당 확장자를 지원하는 브라우저에서만 해당 웹폰트를 로딩한다.*/
  font-display: swap;
    /* swap 속성값으로 지연 없이 바로 폴백 폰트를 호출한다.*/
}
/* noto-sans-kr-700 */
@font-face {
  font-family: 'Noto Sans KR';
  font-weight: 700;
  src: url('../image/noto-sans-kr-700.woff2') format('woff2'),
       url('../image/noto-sans-kr-700.woff') format('woff'),
    /* format 설정으로 해당 확장자를 지원하는 브라우저에서만 해당 웹폰트를 로딩한다.*/
  font-display: swap;
}

구글 웹폰트 헬퍼(google webfonts helper) 사이트에서 CSS를 편리하게 복사하여 사용할 수 있습니다.

*저는 파일명을 고쳤기 때문에 이에 따라 url을 수정하였습니다.

*사용자 컴퓨터에 해당 폰트가 있는지 확인하여 사용하는 local는 삭제하였습니다.(IE 낮은 버전에서 충돌 가능성이 있다고 합니다.)

*oft 확장자 파일을 써야 IE 8 이하에서 작동된다고 하여 oft 파일도 함께 탑재하는 경우들이 있습니다. 하지만 저는 IE 8 이하에서는 폴백 폰트로 대체하면 되기에 탑재하지 않았습니다.

 

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, 
fieldset, legend, input, textarea, p, blockquote, th, td, figure {
	font-family: 'Noto Sans KR', '맑은고딕', sans-serif;
}
/*Noto Sans KR'이 적용되지 않으면 PC에 설치된 맑은고딕, 
없으면 sans-serif 계열 폰트 중에서 적용해 달라는 의미이다*/

이제 필요한 선택자에 폰트를 지정해주면 됩니다.

 

 

마무리하기

바꾸고자 하는 구글 웹폰트의 확장자 및 구성(두께를 많이 포함하고 있는지? 즉, 용량이 큰 폰트 파일인지)을 확인하고, 확장자에 따라서 파일 업로드 방법을 선택하는 것이 더 블로그 속도 최적화에 도움이 될 것입니다.

다음 시간에는 티스토리 기본 폰트인 NotoSans에 대해서 알아보고, 티스토리에 탑재된 폰트 파일의 URL을 찾아서 활용하는 방법을 소개해 보겠습니다. 오늘도 긴 글 읽어주셔서 감사합니다!