• 다크모드 ↔ 라이트모드 변경 방법 일주일 동안 열지 않기

블로그/웹사이트

홈페이지, 블로그 꾸미기 팁 정보 게시판입니다.
  • 목록
  • 아래로
  • 위로
  • 댓글 0개
  • 검색
  • 라이트모드

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

이윰
471 1 0

https://spoqa.github.io/spoqa-han-sans/ko-KR/
오픈소스 글꼴 노토 산스를 커스텀 한 무료 글꼴입니다. (국문, 영문, 일문)
2015년 한글날 최초로 1.0버전이 배포되었고, 현재는 사용자의 의견이 반영된 2.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></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>
body { font-family: 'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Sans-serif'; }
</style>

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

/* style.css */
body  { 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*/
body { font-family: 'Spoqa Han Sans'; }

적용 후기

퀄리티 대비 용량이 너무나도 합리적입니다. 숫자의 가독성이 뛰어나고 귀엽습니다.
Mac PC에서는 눈에 띄는 점이 없었으나, Edge , 익스플로러  환경에서 Bold 체 사용 시 가로획 보다 세로획이 두껍게 보입니다.
글꼴 사이즈가 커질수록 이런 느낌은 줄어들기 때문에 Bold는 18px 이상으로 사용하는 것을 추천합니다.

신고공유스크랩

댓글 0

댓글 쓰기
권한이 없습니다. 로그인

신고

"님의 댓글"

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

댓글 삭제

"님의 댓글"

이 댓글을 삭제하시겠습니까?

공유

퍼머링크
제목 최종 글 조회 수
0
normal
  27
+1
normal
  32
0
normal
  32
+1
image
  166
+1
image
  187
+1
normal
  286
+1
image
  181
+1
image
  152
0
normal
  142
0
normal
  173
+1
normal
  698
+1
normal
  155
+1
normal
  298
+1
image
  180
+1
normal
  228
+1
normal
  185
+1
normal
  209
+2
image
  391
0
normal
  502
+2
image
  161