• 사이트 전체 공지사항 테스트
    일주일 동안 열지 않기

홈페이지 만들기 팁, 정보 게시판입니다.

  • 목록
  • 아래로
  • 위로
  • 쓰기
  • 검색

가독성 좋은 한글 무료 웹폰트 '스포카 한 산스 2.0'

  • 이윰
  • 31
  • 0

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

오픈소스 글꼴 노토 산스를 커스텀 한 무료 글꼴입니다. (국문, 영문, 일문)

2015년 한글날 최초로 1.0버전이 배포되었고, 현재는 사용자의 의견이 반영된 2.0버전입니다. 


노토 산스 (본 고딕)  폰트와 다른 대표적인 특징

  • 대문자 Q, 소문자 L과 Y의 모양이 각져 있음
  • 오픈소스 글꼴인 Lato를 반듯하게 변형한 숫자
  • 다듬어진 특수문자
  • 한글꼴 2,350자로 ttf 글꼴 1.4MB, woff 포맷 471KB로 경량화


웹폰트 적용 방법

스타일 시트에 아래 코드 추가 font-family에 Spoqa Han Sans 추가하거나,

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

HTML의 <head> 태그 안에 추가합니다.

<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 설정을 합니다.

<style>
h1 { font-family: 'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Sans-serif'; }
</style>

또는 스타일 시트에서 폰트 지정해 줄 수도 있습니다.

/* style.css */
h1  { font-family:'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Sans-serif'; }

참고 : 스포카 한 산스 웹폰트 사용 가이드라인

위 방법을 이용해도 되지만, 스포카 한 산스는 

PC설치용 파일뿐 아니라, 로컬 서버에 업로드해서 사용할 수 있도록 변환(woff, eot, svg) 한 파일까지 배포하고 있습니다.

스포카크 한 산스 다운로드 바로 가기


로컬 서버에 업로드하여 웹폰트 적용하는 방법

서버 적당한 곳에 font 폴더를 생성하고 ttf, woff,eot, svg 파일을 업로드합니다. 

스타일 시트에 다음과 같이 추가합니다 

/*style.css*/
@font-face {font-family: 'Spoqa Han Sans';
src: url('/font/Spoqa Han Sans Light.eot');
src: url('/font/Spoqa Han Sans Light.eot?#iefix') format('embedded-opentype'),
url('/font/Spoqa Han Sans Light.woff') format('woff'),
url('/font/Spoqa Han Sans Light.ttf') format('truetype'),
url('/font/Spoqa Han Sans Light.svg#Spoqa Han Sans Light) format('svg')}

url 경로는 알맞게 변경해 주세요. 다음, 폰트를 지정해 줍니다.

/*style.css*/
h1 { font-family: 'Spoqa Han Sans'; }

적용 후기

퀄리티 대비 용량이 너무나도 합리적입니다. 숫자의 가독성이 뛰어나고 귀엽습니다.

Mac PC에서는 눈에 띄는 점이 없었으나, Edge , 익스플로러  환경에서 Bold 체 사용 시 가로획 보다 세로획이 두껍게 보입니다. 글꼴 사이즈가 커질수록 이런 느낌은 줄어들기 때문에 Bold는 18px 이상으로 사용하는 것을 추천합니다.

공유

facebooktwitterpinterestbandkakao story
퍼머링크

댓글 0

권한이 없습니다. 로그인

신고

"님의 댓글"

이 댓글을 신고 하시겠습니까?

삭제

"님의 댓글"

cmd_comment_do 삭제하시겠습니까?