서브셋폰트메이커를 사용한 웹폰트 만들기
http://eond.com/font/361651
위 방법을 이용해서 릭스고딕M 폰트를 웹폰트로 만들어보았습니다.
용량을 비교해보면 Rix고딕M 원본은 2.8MB이고, 서브셋 폰트는 675KB 입니다. 웹폰트용으로는 200~400KB 정도면 훌륭한데, 아무래도 릭스고딕은 조금 더 부드럽게 나타내기 위해서 용량이 큰가 봅니다.
1. Rix고딕M
의외로 별로네요 하하하..-_-;
2. 구글본고딕Black
구글 본고딕은 정말 잘 만들어진 것 같네요. 굵기도 다양한 게 많아서 필요한 굵기로 사용하면 될 듯 합니다.
3. 나눔바른고딕
나눔바른고딕은 본문으로 제격인 듯 합니다.
CSS 입니다.
1. 구글 본고딕 Black
@font-face {
font-family: 'NotoSansBlack';
font-style: normal;
src: url('https://021b64efda903fd2f04226783d09490774fac328.googledrive.com/host/0B5GXa347KCFFVDYydUw4NGwybTg/fonts/NotoSansCJKkr-Black.eot');
src: url('https://021b64efda903fd2f04226783d09490774fac328.googledrive.com/host/0B5GXa347KCFFVDYydUw4NGwybTg/fonts/NotoSansCJKkr-Black.eot') format('embedded-opentype'),
url('https://021b64efda903fd2f04226783d09490774fac328.googledrive.com/host/0B5GXa347KCFFVDYydUw4NGwybTg/fonts/NotoSansCJKkr-Black.woff') format('woff'),
url('https://021b64efda903fd2f04226783d09490774fac328.googledrive.com/host/0B5GXa347KCFFVDYydUw4NGwybTg/fonts/NotoSansCJKkr-Black.otf') format('truetype');
}
2. 릭스고딕M
@font-face {
font-family: 'RixGothicM';
font-style: normal;
src: url('./font/RixGothicM.eot');
src: url('./font/RixGothicM.eot') format('embedded-opentype'),
url('./font/RixGothicM.woff') format('woff');
}
3. 나눔바른고딕
@font-face{font-family:'Nanum Barun Gothic';font-style:normal;font-weight:700;src:url(//cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/v1/NanumBarunGothic-Bold.eot);src:url(//cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/v1/NanumBarunGothic-Bold.eot?#iefix) format('embedded-opentype'),url(//cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/v1/NanumBarunGothic-Bold.woff) format('woff'),url(//cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/v1/NanumBarunGothic-Bold.ttf) format('truetype')}@font-face{font-family:'Nanum Barun Gothic';font-style:normal;font-weight:400;src:url(//cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/v1/NanumBarunGothic-Regular.eot);src:url(//cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/v1/NanumBarunGothic-Regular.eot?#iefix) format('embedded-opentype'),url(//cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/v1/NanumBarunGothic-Regular.woff) format('woff'),url(//cdn.jsdelivr.net/font-nanum/1.0/nanumbarungothic/v1/NanumBarunGothic-Regular.ttf) format('truetype');}
※참조 :
본고딕 서체 용량 최적화 웹폰트 CDN (https://021b64efda903fd2f04226783d09490774fac328.googledrive.com/host/0B5GXa347KCFFVDYydUw4NGwybTg/index.html )
나눔바른고딕 웹폰트 데모 및 다운로드(http://www.cmsfactory.net/node/11353 )
나눔바른고딕 데모 페이지 (http://event0u.co.kr/demo/webfont1.php )
[웹폰트나눔바른고딕 웹폰트 서비스 빠른곳!! (http://blog.naver.com/mrbyj/220377479773 )
제목 | 날짜 | ||
---|---|---|---|
깃헙 웹폰트 | 2018/05/15 | 240 | |
한글 폰트 직접 써보고 고르기 | 2018/05/15 | 658 | |
폰트 이야기 알림입니다. | 2010/05/15 | 282 | |
24 | [웹폰트] 화이트데이체 | 2007/09/02 | 691 |
23 | [웹폰트] 웹돋움 | 2007/09/02 | 541 |
22 | [웹폰트] 윤디자인 웹돋움 | 2007/09/02 | 1144 |
21 | [웹폰트] 소야폰트 | 2007/09/02 | 759 |
20 | [웹폰트] 한글 웹폰트에 대한 생각 | 2014/02/28 | 87 |
19 | [웹폰트] 구글 웹폰트 lora 렉시새봄체 | 2014/08/05 | 495 |
18 | [웹폰트] 웹폰트 위쯔또박체 사용법 | 2015/06/14 | 273 |
17 | [웹폰트] 네이버 웹폰트 954102_10.eot | 2015/06/14 | 148 |
16 | [웹폰트] 한글 웹 폰트 경량화해 사용하기 (Coderifleman, 2015.02), Noto Sans(본고딕) 웹폰트 | 2015/08/30 | 1000 |
15 | [웹폰트] 아모레퍼시픽 아리따글꼴 웹폰트 | 2015/08/30 | 1172 |
14 | [웹폰트] 현대 유앤아이 웹폰트 | 2015/08/30 | 6790 |
13 | [웹폰트] 서브셋폰트메이커를 사용한 웹폰트 만들기 | 2015/08/30 | 1711 |
[웹폰트] 직접 만들어본 릭스고딕M 웹폰트와 구글본고딕, 나눔바른고딕의 비교 | 2015/08/30 | 815 | |
11 | [웹폰트] 제주고딕 웹폰트 | 2015/12/18 | 397 |
10 | [웹폰트] 구글 early access 한글 폰트 리스트 | 2015/12/18 | 171 |
9 | [웹폰트] 웹폰트 | 2015/12/18 | 347 |
8 | [웹폰트] 나눔스퀘어 웹폰트 | 2016/06/06 | 2295 |
7 | [웹폰트] 현대U&I웹폰트, 구글 본고딕 노토산스 | 2016/06/26 | 1328 |
6 | [웹폰트] 괜찮은 웹폰트? 스포카 한 산스 | 2016/07/18 | 414 |
5 | [웹폰트] 무료 사용 가능한 한글 구글웹폰트 | 2017/03/31 | 2729 |