[무료폰트]스포카 한 산스(Spoqa Han Sans) / 웹폰트로 사용하기

 

2015년 한글날 공개한 커스텀 글꼴,
스포카 한 산스

 

 

https://spoqa.github.io/spoqa-han-sans/ko-KR/

Spoqa Han Sans

 

 

웹폰트로 사용하기

 

스포카 한 산스를 웹폰트로 사용하시려면 두 가지 방법이 있습니다.

1. 스타일 시트에 아래의 코드를 넣거나,

@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-jp.css);

 

2. 스타일 안에 아래의 코드를 넣어주세요.

<link href='//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css' rel='stylesheet' type='text/css'>
<link href='//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-jp.css' rel='stylesheet' type='text/css'>

 

 

그 후 style 태그 안에 font-family를 설정해주시면 됩니다.

*{ font-family: 'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Sans-serif'; }

 

 

하지만 위 방법으로 사용하면 불러오는 속도가 느릴 수 있어요.

가능하면 직접 서브해서 사용하는 걸 추천합니다.

 

↓↓↓↓↓

 

한국어 KR로 직접 서브해보겠습니다.

 

SpoqaHanSans_subset.zip

4.71MB

 

압축을 풀면 위와 같은 파일들이 생성돼요.

저는 fonts 파일 안에 SpoqaHanSans 폴더를 생성 후에 안에 넣어두었습니다.

 

 

@font-face {
    font-family: 'Spoqa Han Sans';
    font-weight: 700;
    src: local('Spoqa Han Sans Bold'),
    url('../fonts/SpoqaHanSans/SpoqaHanSansBold.woff2') format('woff2'),
    url('../fonts/SpoqaHanSans/SpoqaHanSansBold.woff') format('woff'),
    url('../fonts/SpoqaHanSans/SpoqaHanSansBold.ttf') format('truetype');
}

@font-face {
    font-family: 'Spoqa Han Sans';
    font-weight: 400;
    src: local('Spoqa Han Sans Regular'),
    url('../fonts/SpoqaHanSans/SpoqaHanSansRegular.woff2') format('woff2'),
    url('../fonts/spoqa-han-sans/SpoqaHanSans/SpoqaHanSansRegular.woff') format('woff'),
    url('../fonts/spoqa-han-sans/SpoqaHanSans/SpoqaHanSansRegular.ttf') format('truetype');
}

@font-face {
    font-family: 'Spoqa Han Sans';
    font-weight: 300;
    src: local('Spoqa Han Sans Light'),
    url('../fonts/SpoqaHanSans/SpoqaHanSansLight.woff2') format('woff2'),
    url('../fonts/SpoqaHanSans/SpoqaHanSansLight.woff') format('woff'),
    url('../fonts/SpoqaHanSans/SpoqaHanSansLight.ttf') format('truetype');
}

@font-face {
    font-family: 'Spoqa Han Sans';
    font-weight: 100;
    src: local('Spoqa Han Sans Thin'),
    url('../fonts/SpoqaHanSans/SpoqaHanSansThin.woff2') format('woff2'),
    url('../fonts/SpoqaHanSans/SpoqaHanSansThin.woff') format('woff'),
    url('../fonts/SpoqaHanSans/SpoqaHanSansThin.ttf') format('truetype');
}

 

파일을 넣어두었으니 CSS에서 스포카 한 산스 링크를 연결해주세요.

이렇게 CSS에 직접 연결해주고 사용해주시면 됩니다.