today:
43
yesterday:
237
Total:
89,947

Joseph 컬럼

Articles 62

무료 오픈소스 글꼴 노트산스 – 본고딕 웹폰트 적용

홈페이지를 개발하면서 누구나 한번쯤은 폰트문제로 고민한 경험이 있을텐데 반갑게도 지난 7월 ‘본고딕’이라는 오픈소스 글꼴이 태어났다.
구글과 어도비가 손잡고 한중일 3개국어를 모두 자유롭게 쓸 수있도록 새롭게 공개한 글꼴로서 구글은 ‘노토산스CJK’로 어도비는 ‘본고딕’으로 부른다.
양사에서 따로 개발하다가 구글의 적극적인 비용지원으로 무료 오픈소스로 탄생하게 되었다고 한다. 역시 구글~
우리나라 서체 개발에는 ‘산돌커뮤니케이션’이 참여했는데 그래서인지 산돌체와 많이 비슷한 느낌이다.
예전에 나눔글꼴이 처음 무료로 나왔을 때 서체 라이센스 문제로 고민이 많던 웹디자이너나 그래픽디자이너들이 너나 할것 없이 모두 나눔체로 디자인된 인쇄물이 쏟아냈던걸 보면 이번에는 본고딕이 그 뒤를 이을 것으로 보인다.
특히 본고딕 글꼴은 단순히 bold 지원만이 아닌 7가지 굵기를 지원한다.
구글 Noto Fonts 페이지에서 나라별 언어를 받아서 설치할 수 있다.

본고딕 다운받는 곳

구글 : http://www.google.com/get/noto/
어도비 : http://blog.typekit.com/alternate/source-han-sans-kor/

360M가 넘는 용량이므로 한글서체만 다운받으려면 하단 리스트에서 Noto Sans CJK KR만 다운받아도 된다.

 Noto Sans CJK KR

Specimens

Thin 100

Light 300

DemiLight 350

Regular 400

Medium 500

Bold 700

Black 900

Language coverage : Korean

 본고딕 웹폰트 적용 방법

Noto Sans (본고딕) 서체가 정식 구글웹폰트이긴 하지만 구글 폰트사이트에서 설명하는 적용방법대로 여러가지 테스트를 해보았는데 아직 반영되지 않는다.
구글이 공개한 노트산스의 한국어판 용량이 너무 커서 early access 같은 지원을 아직 고민중인 것으로 보인다.
홈페이지에 반영을 원한다면 당분간은 브라우져별로 지원되는 서체를 종류별로 직접 다운받아 서버에 올려놓는 비동기 방식으로 구현해야 할 것 같다.

1. html 코드 추가 방식
가장 Standard 형태임. 인클루드 되는 소스파일을 열고 head에 추가하면 된다.

<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>

 
2. CSS 적용 방식
import 코드를 사용해서 아래와 같이 CSS 파일에 코드를 추가한다.

@import url(http://fonts.googleapis.com/css?family=Noto+Sans);

 
3. Javascript 방식
인클루드 되는 head 파일에 아래와 같이 자바스크립트 구문을 추가한다.

<script type="text/javascript"> WebFontConfig = { google: { families: [ 'Noto+Sans::latin' ] } }; (function() { var wf = document.createElement('script'); wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })(); </script>

 
4. 웹폰트 직접 로딩방식
웹폰트를 다운받아 서버에 올려 놓고 css에 소스 경로를 추가해준다.
이러한 비동기방식은 브라우저가 웹폰트를 다운받은 후 다시 텍스트를 렌더링하므로 일부 브라우저에서 깜박임 현상이 있다.
* ttf파일 다운받는곳 : http://www.1001freefonts.com/noto_sans.font
@font-face{
font-family:hansans;
src:url('/webfont/SourceHanSans-Regular.eot');
src:local(※),
url('/webfont/SourceHanSans-Regular.woff') format('woff');
}

 
위 방식중 한가지로 반영하였으면 이제 실제로 원하는 곳에 스타일을 적용하면 된다.
body { font-family: 'Noto Sans', sans-serif; }

 

기타 한글 무료 웹폰트들

정식 구글웹폰트는 아니지만 early access로 구글에서 제공하는 무료 웹폰트들.
(early access 폰트들은 이름만 추가해서는 동작하지 않으므로 소스경로까지 import 해야만 한다)

1. 하나체
Link : @import url(http://fonts.googleapis.com/earlyaccess/hanna.css);
Example : font-family: 'Hanna', serif;

2. 제주고딕
Link : @import url(http://fonts.googleapis.com/earlyaccess/jejugothic.css);
Example : font-family: 'Jeju Gothic', serif;

3. 제주한라산
Link : @import url(http://fonts.googleapis.com/earlyaccess/jejuhallasan.css);
Example : font-family: 'Jeju Hallasan', serif;

4. 제주명조
Link : @import url(http://fonts.googleapis.com/earlyaccess/jejumyeongjo.css);
Example : font-family: 'Jeju Myeongjo', serif;

5. KoPub 바탕체
Link : @import url(http://fonts.googleapis.com/earlyaccess/kopubbatang.css);
Example : font-family: 'KoPub Batang', serif;

6. 나눔 Brush
Link : @import url(http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css);
Example : font-family: 'Nanum Brush Script', serif;

7. 나눔 고딕체
Link : @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
Example : font-family: 'Nanum Gothic', serif;

8. 나눔 고딕 코딩
Link : @import url(http://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css);
Example : font-family: 'Nanum Gothic Coding', serif;

9. 나눔 명조체
Link : @import url(http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
Example : font-family: 'Nanum Myeongjo', serif;

10. 나눔 Pen Script
Link : @import url(http://fonts.googleapis.com/earlyaccess/nanumpenscript.css);
Example : font-family: 'Nanum Pen Script', serif;

※ 중국, 대만, 일본 등 해외 무료 Early Access 폰트들도 확인하려면

http://www.google.com/fonts/earlyaccess


No.
Subject
Notice The fruits of the Sprit 394
61 (영어 전문) 도널드 트럼프 대통령 취임사 108
Chief Justice Roberts, President Carter, President Clinton, President Bush, President Obama, fellow Americans and people of the world, thank you. We, the citizens of America are now joined in a great national effort to rebuild our country an...  
60 도널드 트럼프 대통령 취임사 (한국어 전문) 181
로버츠 대법원장, 카터 대통령, 클린턴 대통령, 부시 대통령, 오바마 대통령, 친애하는 미국인 여러분, 전 세계의 여러분. 감사합니다. 우리 미국인들은 지금 미국을 재건하고 모든 국민을 향한 약속을 다시 이행하고자 하는 국가적 노력에 동참 하고 있습니다...  
59 경제보다 정의가 우선입니다 117
" 경제보다 정의가 우선입니다. " 이재용 삼성그룹 부회장에 대한 구속영장을 신청하면서 나온 이 한마디 들어본 말중에서 멋진 말중에 하나 이다.  
58 시간은 돈이다 file 102
미국은 변호사가 되어도 어렵다는 소식을 접하고 있지만 ( 참고: http://chosun.us/253253 ) 한국은 최순실 게이트로 변호사들이 물을 만났다. 최순실을 변호하는 이경재 부터 박근혜 변호인단까지 그들은 시간을 끌면 끌수록 변호사 수임료만 올라 간다. 그래...  
57 ‘송박영신’의 무서운 민심 70
김준술 JTBC 사회 2부장 박근혜 대통령은 2013년 2월 취임사부터 ‘배려와 책임’을 말했다. “우리는 콩 한쪽도 나눠 먹고 살았다”며 공동 이익을 강조했다. 늦가을 감을 ‘까치밥’으로 남기는 전통도 얘기했다. 그런 정신이 “방향 잃은 자본주의 대안”이라고도 ...  
56 이러려고 대통령 하려고 했나 file 40
 
55 2016년 가장 섬뜩한 사진 96
비선 개입을 통해 국정을 농단한 최순실씨가 19일 서울 서초구서울중앙지법에서 열린 공판준비기일에 예상을 깨고 출석했다. 최순실씨는 카메라 앞에서는 자숙하는 모습을 보이다, 카메라가 빠지자 공소사실을 전면 부인하는 모습으로 누리꾼의 공분을 샀다. ...  
54 Orange County, CA 4
Wig Shop Owner and Operated By Same Owner In Same Location for 38 Ye Orange County, CA Business Description This wig shop has been owned and operated by the same owner in the same location for 38 years. They are highly recommended by local ...  
53 Wig Boutique 7
Wig Boutique In The Best Of Locations Scottsdale, AZ (Maricopa County) Facilities: This Well Established Business has been in business for 25 years. Well suited to compassionately serve for medically related hair loss market and a well esta...  
무료 오픈소스 글꼴 노트산스 – 본고딕 웹폰트 적용 173
무료 오픈소스 글꼴 노트산스 – 본고딕 웹폰트 적용 홈페이지를 개발하면서 누구나 한번쯤은 폰트문제로 고민한 경험이 있을텐데 반갑게도 지난 7월 ‘본고딕’이라는 오픈소스 글꼴이 태어났다. 구글과 어도비가 손잡고 한중일 3개국어를 모두 자유롭게 쓸 수있...  
51 A little girl listens to her dead mother's voice 1294
A little bit sad story...  
50 열받은 새 file 651
 
49 소고기 좋아하는 분들 보세요. 916
도축용으로 길러진 암소는 태어나 대부분의 시간을 사육장에서 살았다. 어느 날 사람들에 의해 몸이 묶이고 차에 실리자, 암소는 겁에 질려 눈물을 흘렸다. 소는 죽을 것으로 알고 끌려갈때 눈물을 흘린다고 한다... 하지만 목적지는 도축장이 아니었다.  
48 대한민국은 국회의원 운영(안) 196
1. 현재 300명의 숫자를 100명으로 축소해야 한다. 2. 국회의원의 세비는 월 150만원으로 해야 한다. (어차피 뇌물로 살아가는 인간들 이니) 3. 매일 출석체크 해야 한다. 지각,조퇴 2번 하면 1번 결석으로 하고 3번 결석하면 짤르는 것으로. 4. 전원 대중교통...  
47 국회의장님 삼권분립의 진정한 의미를 아세요? 292
최근 국회의장이 소위 삼권분립를 운운하며 입법활동하라는 목소리를 외면하고 있습니다. 국회 의사봉만 쥐고 있으면 국회의장 입니까? 물론 국회의장님은 의전서열 2위 이듯이 귀하도 중요하게 대우 받아야 할 위치 입니다. 하지만 기본을 알고 활동하시기를 ...  
46 Cost, Insurance and Freight secret 3
This is a secret article.  
45 8 Tips to Writing Effective Consulting Proposals that Win Business 4
The consulting proposal is misunderstood. Consultants believe they understand what a ‘proposal’ should be yet their idea of one is ineffective and often results in losing the business they are after. To help bridge this gap I’ve provided 8 t...  
44 http://www.slideshare.net/flevydocs/332-30855324 8
http://www.slideshare.net/flevydocs/332-30855324  
43 How to Write a Proposal As a Consultant 26
Step 1Prepare a structure for the proposal to ensure you include all essential information. If you are responding to a Request for Proposal, write your bid in the format specified by the client. For other proposals, create a logical structur...  
42 Create Powerful Consulting Proposals for Clients 24
Background Including this section helps to demonstrate to the client your understanding of their problem. It puts in writing what you and the client have discussed regarding their situation and needs, and helps define the scope of the projec...  
41 LIST 62
adongmh@yahoo.co.kr, haksinne@gmail.com, amilee56@hotmail.com, paikanna@gmail.com, appleamy95@hanmail.net, bmin001@gmail.com, bell20@telus.net, bigsky027@yahoo.com, byongrho@yahoo.com, hyunji0318@hotmail.com, cayu888@hotmail.com, artfun@hotm...  
40 뉴스기사 101
http://news.chosun.com/svc/content_view/content_view.html?contid=1999030370196 http://www.koreadaily.com/news/read.asp?art_id=326697  
39 The tech trends that will change the world (2015) 122
According to every credible source we can find, there are almost 3 billion people connected to the public internet right now; by 2020 the number will approach 4 billion. According to Cisco, by 2020 there will be over 50 billion connected dev...  
38 Day 18 - 12/25/14 secret 9
This is a secret article.  
37 Day 17 - 12/24/14 secret 5
This is a secret article.  
36 Day 16 - 12/23/14 secret 4
This is a secret article.  
35 Day 15 - 12/21/14 secret 3
This is a secret article.  
34 Day 14 - 12/20/14 secret 6
This is a secret article.  
33 Day 13 - 12/19/14 secret 3
This is a secret article.  
32 Day 12 - 12/18/14 secret 5
This is a secret article.  
31 계약서 초안 1 secret 2
This is a secret article.  
30 Day 11 - 12/17/14 1 secret 5
This is a secret article.  
29 Day 10 - 12/16/14 1 secret 1
This is a secret article.  
28 Day 9 - 12/15/14 1 secret 4
This is a secret article.  
27 Day 8 - 12/14/14 1 secret 5
This is a secret article.  
26 Day 7 - 12/13/14 1 secret 3
This is a secret article.  
25 Day 6 - 12/12/14 1 secret 4
This is a secret article.  
24 iOS Development Tutorial - Series Introduction 156
 
23 Day 5 - 12/11/14 1 secret 3
This is a secret article.  
22 Day 4 - 12/10/14 1 secret 8
This is a secret article.  
21 Day 3 - 12/09/14 secret 15
This is a secret article.  
20 Day 2 - 12/08/14 1 secret 4
This is a secret article.  
19 Day 1 - 12/7/2014 secret 6
This is a secret article.  
18 iOS Apps Development Class - Joseph file 237
 
17 AMBER Alert 441
AMBER AlertDid you receive an AMBER Alert on your phone? Click here to learn more about the new Wireless Emergency Alert program. As of January 1, 2013, AMBER Alerts™ will now be automatically sent through the Wireless Emergency Alerts (WEA)...  
16 Gambling Addiction in Las Vegas 1397
A story of gambling addiction in Las Vegas.  
15 뉴스 읽기 (8년전 반납안한 대여 VHS 테잎 때문에 체포된 사연) 751
미국 사우스 캐롤라이나 -- Kayla Michelle Finley은 다른일로 경찰서를 찾았다가 체포 되었다. 사유는 8년전 8년전 반납안한 대여 VHS 테잎 때문에 체포영장이 발부 되어 있었던 것. 이미 그 가게는 문을 닫았으며 빌러간 테잎은 2005년... 19살때 빌렸고 지...  
14 Yeppy, don't fence me in. 390
 
13 Heaven is a real place – where your soul and spirit can live forever. 381
1. God loves you and has a plan for you! The Bible says, “God so loved the world that He gave His one and only Son, [Jesus Christ], that whoever believes in Him shall not perish, but have eternal life” (John 3:16). Jesus said, “I came that ...  
Korean Community