노토산스(NotoSans) 본고딕 웹폰트의 빠르고 간편한 티스토리 적용
티스토리 노토산스(NotoSans) 본고딕 한글 글꼴 웹폰트를 적용하는 방법을 쉽고 효율적으로 알아보겠습니다. 임폴트 방법 외에도 티스토리 서버에 직접 저장하여 글꼴을 구현하는 방식은 빠르고 간편하며 사이트 속도에 최적화되어 있습니다.
이 방법은 대부분의 사이트에서 가장 빠르게 작동하지만, 워드프레스와 같이 독립적으로 호스팅하는 경우 트래픽과 부하 문제가 발생할 수 있습니다. 그래서 일반적으로 CDN으로 적용하는 방식이 선호됩니다.
관련 구글 웹폰트(import 방식) 공식
@font-face {
font-family: 'NotoSansKR';
font-display: auto;
font-style: normal;
font-weight: 400;
src: url(./images/NotoSansKR-Regular.woff2) format('woff2'),
url(./images/NotoSansKR-Regular.woff) format('woff'),
url(./images/NotoSansKR-Regular.otf) format('opentype');
}@font-face {
font-family: 'NotoSansKR';
font-display: auto;
font-style: normal;
font-weight: 500;
src: url(./images/NotoSansKR-Medium.woff2) format('woff2'),
url(./images/NotoSansKR-Medium.woff) format('woff'),
url(./images/NotoSansKR-Medium.otf) format('opentype');
}@font-face {
font-family: 'NotoSansKR';
font-display: auto;
font-style: bold;
font-weight: 700;
src: url(./images/NotoSansKR-Bold.woff2) format('woff2'),
url(./images/NotoSansKR-Bold.woff) format('woff'),
url(./images/NotoSansKR-Bold.otf) format('opentype');
}구글에서 제공하는 임폴트 방식이 아니라 서버 내에서 사용하는 것이 가장 빠릅니다.
Import 방법이 어려운 경우 위의 CSS 코드를 그대로 티스토리에 작성하고 글꼴 파일을 업로드하면 쉽게 노토산스를 적용할 수 있습니다. 구글에서 제공하는 방식으로 글꼴을 적용하려면 Noto Sans KR로 검색하여 살펴보세요.
노토산스 – Noto Sans 한글 적용
구글에서 제공하는 본고딕 웹폰트는 무겁기 때문에 경량화된 노토산스 한글을 사용합니다. 아래의 압축 파일은 경량화된 폰트이므로 사이트에 큰 부담 없이 사용할 수 있습니다. 글꼴은 세 가지 굵기를 제공하며 호환성이 좋아 모바일에서도 깨짐 없이 표현됩니다.
폰트 파일을 다운로드하고 티스토리 스킨 편집에서 업로드한 후 상단에 설명한 CSS 코드를 @font-face로 적용하면 해당 글꼴이 변경됩니다. 폰트를 변경할 때는 font-family에서 ‘NotoSansKR’로 선언하여 확인할 수 있습니다.