한글 폰트 import 모음

 

 

나는 보통 google font를 import 시켜서 사용한다. 영문 폰트와 한글폰트 모두. 트래픽 문제도 있지만, 일차적인 문제는 우리 사수님이 무조건 web font를 사용하시길 원하셔서....ㅎ_ㅎ

 

그중에서 내가 (최근들어) 제일 자주 쓰는것은 단연 Noto sans CJK kr !

일전에는 나눔스퀘어나 나눔바른고딕 폰트를 애용했는데, 나눔바른고딕은 font weight를 bold로 줬을때 너무너무너무너무 안예뻐진다는 단점이 있었고 (심지어 부피도 커지더라. 줄바뀜현상 발견) 나눔 스퀘어는........ 처음에 봤을땐 참 예뻤는데 지금 봐서는 폰트가 좀 가볍다는 느낌이 들었다.

 

noto sans는 구글과 어도비가 합작해서 만든 폰트로, 본고딕 이라고도 한다. 한글, 중국어, 일본어가 지원되므로 한국 사이트에 적용하기 굉장히 적합하고, 상업적 용도 사용이 가능한 오픈 라이센스라는점 !

 

 

가장 깔끔하고 기본적인 느낌에, 여러가지 font weight가 적용된다는 점이 가장 마음에 든다.

 

Noto sans cjk kr import 사용방법 -

 

https://fonts.google.com/earlyaccess#Noto+Sans+KR

 

 

@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

 

font-family: "Noto Sans KR";

 

 

2018.12.04 수정)

Noto sans 폰트는 여전히 google font에서 서비스 하고 있지만, 무슨 이유에서인지 이제는 ie에서는 import로 불러오는 형식으로는 먹히지 않는다. 이를 방지하기 위해서는

 

@import url(//cdn.rawgit.com/theeluwin/NotoSansKR-Hestia/master/stylesheets/NotoSansKR-Hestia.css);

 

로 import 끌어오는 것을 바꾸거나,

 

 

@font-face { 

  font-family: 'Noto Sans KR'; 

  font-style: normal; 

  font-weight: 100; 

  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'), 

      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'), 

      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype'); 

} 

@font-face { 

  font-family: 'Noto Sans KR'; 

  font-style: normal; 

  font-weight: 300; 

  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'), 

      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'), 

      url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype'); 

} 

@font-face { 

  font-family: 'Noto Sans KR'; 

  font-style: normal; 

  font-weight: 400; 

  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'), 

        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'), 

        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype'); 

 } 

@font-face { 

  font-family: 'Noto Sans KR'; 

  font-style: normal; 

  font-weight: 500; 

  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'), 

        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'), 

        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype'); 

 } 

@font-face { 

  font-family: 'Noto Sans KR'; 

  font-style: normal; 

  font-weight: 700; 

  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'), 

        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'), 

        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype'); 

 } 

@font-face { 

  font-family: 'Noto Sans KR'; 

  font-style: normal; 

  font-weight: 900; 

  src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'), 

        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'), 

        url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype'); 

 } 

 

를 써서 직접 font-face를 작성하면 된다.

 

 

그외의 한글 폰트 import -

 

 

하나체

 

URL: @import url(http://fonts.googleapis.com/earlyaccess/hanna.css);

적용: font-family: 'Hanna', serif;

제주고딕

URL: @import url(http://fonts.googleapis.com/earlyaccess/jejugothic.css);

적용: font-family: 'Jeju Gothic', serif;

제주한라산

URL: @import url(http://fonts.googleapis.com/earlyaccess/jejuhallasan.css);

적용: font-family: 'Jeju Hallasan', serif;

제주명조

URL: @import url(http://fonts.googleapis.com/earlyaccess/jejumyeongjo.css);

적용: font-family: 'Jeju Myeongjo', serif;

KoPub 바탕체

URL: @import url(http://fonts.googleapis.com/earlyaccess/kopubbatang.css);

적용: font-family: 'KoPub Batang', serif;

나눔 Brush

URL: @import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);

적용: font-family: 'Nanum Brush Script', serif;

나눔 고딕체

URL: @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);

적용: font-family: 'Nanum Gothic', serif;

나눔 고딕 코딩

URL: @import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);

적용: font-family: 'Nanum Gothic Coding', serif;

나눔 명조체

URL: @import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);

적용: font-family: 'Nanum Myeongjo', serif;

나눔 Pen Script

URL: @import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);

적용: font-family: 'Nanum Pen Script', serif;

 

 

출처 : http://blog.singihae.com/%ea%b5%ac%ea%b8%80-%eb%ac%b4%eb%a3%8c-%ed%8f%b0%ed%8a%b8-noto-sans-cjk-%ec%9d%b4%ec%9a%a9%ed%95%98%ea%b8%b0/