티스토리 노토산스(NotoSans) 본고딕 한글
매우 쉬운 방법으로 노토산스 본고딕을 적용하는 방법을 정리한다. 임폴트 방법도 있지만, 아래의 방법이 가장 빠르고 간편하고 사이트 속도에 최적화가 되어 있는 방법이다. 바로 티스토리 서버내에 저장해서 글꼴을 구현하는 방식이다. 대부분의 사이트에서 이 방법이 가장 빠르지만, 워드프레스와 같이 독립형으로 호스팅을 이용해서 하는 방법은 트래픽과부하가 발생할 수 있으므로, 대부분은 CDN으로 적용하는 방식을 쓴다.
@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'로 선언해주면 해당 글꼴이 변경되는 것을 확인할 수 있을 것이다.
'Style > Font' 카테고리의 다른 글
Afterglow 우아하고 아름다운 영문폰트 (0) | 2019.11.06 |
---|---|
구글 본고딕(Noto Sans CJK) 적용 및 경량화버전 다운로드 (0) | 2019.11.01 |
한자 중국어 폰트 글꼴 다운로드(汉仪新蒂唐朝体) (0) | 2019.10.31 |
아이콘폰트 XEICON 1.0.4 + 2.3.3 웹사이트 제작에 좋은 그래픽 아이콘 툴킷 (0) | 2019.10.29 |
영문필기체 Chalisa Octavia Font (0) | 2019.10.19 |
아리따글꼴, 아리따 돋움 / 아리따 부리(한글무료폰트 / 고딕체) (0) | 2019.10.14 |
한글무료폰트 S-Core 드림글꼴 (0) | 2019.10.13 |
검은고딕 폰트 '무겁고, 남성적인 타이틀에 좋은 글꼴' (0) | 2019.10.13 |