티스토리 기본 웹폰트

티스토리의 숨겨진 폰트 스타일시트

티스토리에서는 사실 기본적으로 웹폰트를 제공하고 있다. 대부분 노토 산스, 즉 본고딕을 웹폰트로 활용하는 경우가 많은데, 아이러니하게도 티스토리에서는 기본적으로 웹폰트로 본고딕을 사용하고 있다. 그것도 다양한 굵기를 지원한다. 티스토리에서는 이러한 사실을 왜 공지하지 않는지 이해할 수 없지만, 티스토리의 기본적인 기능들을 제공하기 위한 소스가 필요하고, 이에 따라 본고딕으로 웹폰트를 지정 및 표시하고 있다.

https://t1.daumcdn.net/tistory_admin/assets/blog/tistory-187d01c0d459bcea39d4cb7a696afc4a2f7af3bf/blogs/style/manage/font.css

따라서, 블로그를 꾸미기 위해 굳이 웹폰트를 별도로 불러올 필요 없이 티스토리 블로그를 이용하고 있다면 폰트 페이스를 통해서 바로 웹폰트를 불러올 수 있다. 스타일 시트에 아래와 같이 폰트 페이스로 웹폰트를 지정하고 폰트 패밀리를 통해서 웹폰트를 사용할 수 있는 것이다.

웹폰트 스타일시트

@charset "utf-8";

/* webfont */

@font-face {
    font-family: 'Noto Sans Light';
    font-weight: normal;
    src: local(/tistory-admin-2017/font/NotoSansCJKkr-Light.woff);
    src: local(☺),
    url(//t1.daumcdn.net/tistory_admin/static/manage/font/NotoSansCJKkr-Light.woff) format('woff'),
    url(//t1.daumcdn.net/tistory_admin/static/manage/font/NotoSansCJKkr-Light.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans DemiLight';
    font-weight: normal;
    src: local(/tistory-admin-2017/font/NotoSansCJKkr-DemiLight.woff);
    src: local("☺"),
    url(//t1.daumcdn.net/tistory_admin/static/manage/font/NotoSansCJKkr-DemiLight.woff) format('woff'),
    url(//t1.daumcdn.net/tistory_admin/static/manage/font/NotoSansCJKkr-DemiLight.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans Regular';
    font-weight: normal;
    src: local(/tistory-admin-2017/font/NotoSansCJKkr-Regular.woff);
    src: local("☺"),
    url(//t1.daumcdn.net/tistory_admin/static/manage/font/NotoSansCJKkr-Regular.woff) format('woff'),
    url(//t1.daumcdn.net/tistory_admin/static/manage/font/NotoSansCJKkr-Regular.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans Medium';
    font-weight: normal;
    src: local(//t1.daumcdn.net/tistory_admin/static/manage/font/NotoSansCJKkr-Medium.woff);
    src: local("☺"),
    url(//t1.daumcdn.net/tistory_admin/static/manage/font/NotoSansCJKkr-Medium.woff) format('woff'),
    url(//t1.daumcdn.net/tistory_admin/static/manage/font/NotoSansCJKkr-Medium.otf) format('opentype');
}

@font-face {
    font-family: 'AvenirNext Bold';
    font-weight: normal;
    src: local(https://t1.daumcdn.net/tistory_admin/static/font/AvenirNextLTPro/AvenirNextLTPro-Bold.eot);
    src: local("☺"),
    url(https://t1.daumcdn.net/tistory_admin/static/font/AvenirNextLTPro/AvenirNextLTPro-Bold.woff2) format('woff2'),
    url(https://t1.daumcdn.net/tistory_admin/static/font/AvenirNextLTPro/AvenirNextLTPro-Bold.woff) format('woff'),
    url(https://t1.daumcdn.net/tistory_admin/static/font/AvenirNextLTPro/AvenirNextLTPro-Bold.ttf) format('truetype');
}

@font-face {
    font-family: 'Avenir Next Regular';
    font-weight: normal;
    src: local(//t1.daumcdn.net/tistory_admin/static/font/AvenirNext-Regular.eot);
    src: local("☺"),
    url(//t1.daumcdn.net/tistory_admin/static/font/AvenirNextLTPro/AvenirNext-Regular.woff2) format('woff2'),
    url(//t1.daumcdn.net/tistory_admin/static/font/AvenirNextLTPro/AvenirNext-Regular.woff) format('woff'),
    url(//t1.daumcdn.net/tistory_admin/static/font/AvenirNextLTPro/AvenirNext-Regular.otf)format('opentype'),
    url(//t1.daumcdn.net/tistory_admin/static/font/AvenirNextLTPro/AvenirNext-Regular.ttf)format('truetype');
}

모든 웹폰트 요소를 사용할 필요는 없고, 필요한 요소만 가져와서 활용하면 된다. 이렇게 하면 티스토리 블로그에서 사용되는 불필요한 리소스를 줄일 수 있어 웹폰트를 불러오기 위해 발생하는 지연속도를 줄일 수 있다. 결과적으로 너무 많은 웹폰트는 많은 데이터를 요구하기 때문에 모바일 환경에서 속도 저하가 발생할 수 있다.