티스토리 뷰
스포카 한 산스(Spoqa Han Sans)폰트는 스포카라는 회사에서 2015년 한글날 공개된 무료 폰트입니다.
공식 배포페이지 설명으로는 한글과 영문,일본어에 모두 대응하는 노토 산스 글꼴을 커스텀했고 숫자를 고려해서 커스텀했다고 합니다.
폰트 굵기는 Regular와 Thin, Light를 지원하며 웹에서는 Thin는 너무 얇아서 문제가 될 수 있고 Regular는 조금 두꺼운 느낌이라고 합니다. 그래서 중간형태의 Light굵기를 추가했다고 합니다. 파일은 KR오리지널과 KR서브셋, 일본어의 JP오리지널과 JP서브셋이 있는데 웹에 사용하려면 서브셋을 다운받으시면 됩니다.
웹폰트 또한 지원한다고 해서 살펴봤습니다.
아래는 실제 적용해본 폰트입니다. (본 포스트 내용은 나눔고딕이 사용됐지만 아래 박스 안의 내용만은 스포카 한 산스 폰트 적용입니다.)
본 폰트는 스포카 한 산스 폰트로 크기는 9px=0.56em=6.75pt 크기입니다.
본 폰트는 스포카 한 산스 폰트로 크기는 10px=0.62em=7.5pt 크기입니다.
본 폰트는 스포카 한 산스 폰트로 크기는 11px=0.68em=8.25pt 크기입니다.
본 폰트는 스포카 한 산스 폰트로 크기는 12px=0.75em=9pt 크기입니다.
본 폰트는 스포카 한 산스 폰트로 크기는 16px=1em=12pt 크기입니다.
본 폰트는 스포카 한 산스 폰트로 크기는 20px=1.25em=15pt 크기입니다.
본 폰트는 스포카 한 산스 폰트로 크기는 24px=1.5em=18pt 크기입니다.
11.172글자가 포함된 TTF형식의 폰트는 전체용량이 커서 웹에 사용하기 적절하지 않습니다. 따라서 완성형의 최소 단위인 2,350자로 줄였다고 합니다. (서브셋버전 woff형식)
이제 2,350자의 완성형 웹폰트 적용방법을 알아보겠습니다.
방법은 두가지 입니다
- 무료로 제공되는 폰트주소 링크해서 사용
- 단점 : 무료로 제공되는 링크주소이기때문에 속도가 느립니다.
- 폰트 다운로드 및 티스토리에 설치해서 사용
- 단점 : 속도가 빠른 대신 용량이 큽니다.(7MB이상 - Regular와 Bold만 업로드시 3.6MB)
- 폰트굵기가 Thin, Light, Regular, Bold로 총4가지이고 굵기마다 ttf, woff, woff2가 존재합니다. 4x3 총 12개의 파일로 구성되었습니다. 보통 Thin과 Light는 잘 안쓰니 Regular와 Bold만 업로드해서 사용하셔도 됩니다.
폰트주소 링크해서 사용
티스토리 관리자페이지 - HTML/CSS편집 - CSS탭에 아래 코드 추가 후 저장합니다.
CSS
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);
그 후 관리페이지 - HTML/CSS편집 - CSS탭에서 font-family를 찾으신 후 다음과 같이 'Spoqa Han Sans'를 추가해주세요.
찾으실 때는 CSS창 빈곳을 마우스로 클릭 후 Ctrl + F를 눌러서 font-family를 입력하고 엔터를 누르세요.
font-family의 추가된 순서대로 적용되기 때문에 font-family:의 바로 뒤에 추가해야 하며 뒤에 다른 폰트들이 있을때는 ,(쉼표)까지 추가해야 합니다.
또한 font-family부분은 스킨마다 위치와 방법이 다르므로 잘 확인해야 합니다.
폰트 다운로드 및 티스토리에 설치 방법
아래 2개의 파일 모두 다운 받으세요
폰트와 폰트를 연결해줄 css파일입니다.(폰트는 공식 배포사이트에서 직접 다운로드 됩니다)
그외 일본어폰트나 TTF폰트등을 다운로드 받으시려면 아래의 공식 배포사이트로 가시면 다운받으실 수 있습니다.
다운받으신 파일중 SpoqaHanSans_subset.zip파일의 압축을 푸시면 다음과 같이 나오는데
이중에서 폰트굵기가 보통(Regular), 굵게(Bold)가 주로 많이 쓰이니까 위 사진처럼 6개의 파일만 티스토리로 업로드합니다.
또 SpoqaHanSans-kr.zip파일의 압축을 풀면 다음과 같이 css파일 1개가 나옵니다.
티스토리의 관리페이지 - HTML/CSS 편집 - 파일업로드에서 추가버튼을 눌러 업로드 해주세요.
위의 폰트 6개의 파일과 SpoqaHanSans-kr.zip을 압축풀었을때 나오는 SpoqaHanSans-kr.css파일, 총 7개 파일을 업로드합니다.
그 후 관리페이지 - HTML/CSS편집 - CSS탭에서 font-family를 찾으신 후 다음과 같이 'Spoqa Han Sans'를 추가해주세요
찾으실 때는 CSS창 빈곳을 마우스로 클릭 후 Ctrl + F를 눌러서 font-family를 입력하고 엔터를 누르세요.
font-family의 추가된 순서대로 적용되기 때문에 font-family:의 바로 뒤에 추가해야 하며 뒤에 다른 폰트들이 있을때는 ,(쉼표)까지 추가해야 합니다.
또한 font-family부분은 스킨마다 위치와 방법이 다르므로 잘 확인해야 합니다.
'Etc,웹' 카테고리의 다른 글
| 무료도메인에 이메일(다음스마트워크, ese.kr) 연결하는 방법 (2) | 2017.10.10 |
|---|---|
| 무료 도메인(내도메인.한국)을 블로그에 연결하는 방법 (1) | 2017.10.04 |
| 임시 이메일 에쎄(ESE) 소개 및 장단점 (0) | 2017.09.30 |
| 개편된 티스토리 살펴보기 (2) | 2017.08.31 |
| 나눔고딕 웹폰트 설치 및 적용하기 (0) | 2017.08.21 |