티스토리 노토산스(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 한글 적용

구글에서 제공하는 본고딕 웹폰트의 경우에는 상당히 무겁기 때문에 경량화 버전을 거친 노토산스 한글을 사용하는데, 아래의 업로드 파일은 경량화 폰트이므로 사이트 내에서 큰 부담없이 사용할 수 있을 것이다. 글꼴의 굵기는 세가지를 제공하고 있다.

Notosans.zip

1.84MB

또한, 상당히 호환성이 좋기 때문에 모바일에서도 깨짐없이 한글이 잘 표현되며, 가장 기본적으로 사용할 수 있는 웹폰트라서 많은 웹사이트에서 노토산스 한글(본고딕)을 사용하고 있다. 위의 파일을 다운받아 압축을 풀고 티스토리 스킨편집에서 파일을 업로드 한 후, 상단에 설명했던 CSS 요소를 @font-face로 적용시킨다. 그리고 해당 부분의 글꼴을 변경할 때는 font-family 에서 'NotoSansKR'로 선언해주면 해당 글꼴이 변경되는 것을 확인할 수 있을 것이다.