작성일자
카테고리 폰트/한글폰트

본고딕은 구글과 어도비 시스템즈가 2014년 7월 출시한 한국어, 중국어 번체와 간체, 일본어와 라틴어, 그리스어, 키릴 자모를 지원하는 한중일 공통 오픈소스 폰트로 아파치 2.0 라이선스를 적용받습니다. 구글은 노토산스CJK(Noto Sans CJK - Chinese, Japanese, Korean), 어도비는 본고딕이란 이름으로 배포합니다. 개발비용은 구글이 전액 부담했으며, 어도비가 주무를 맡고 산돌과 시노타입, 이와타가 디자인에 참여했으며 개발기간은 3년이라고 합니다.

 

Noto Sans CJK는 하나의 폰트로 한국어, 중국어 간체, 중국어 번체, 일본어를 지원하므로 폰트의 크기는 하나당 16메가바이트에 달해서 웹폰트로 사용하기에는 적당하지 않습니다. 일본어의 경우 웹폰트가 가능한데 글자 수가 우리나라보다 적고 파일 크기가 4메가 바이트라서 그렇습니다. 혹시나 해서 일본어 폰트를 구글 웹폰트로 사용해봤더니 한글은 바탕체로 나타납니다. 하지만 한자는 본고딕으로 나타납니다.

 

Noto Sans Japanese (Japanese)

When text is rendered by a computer, sometimes there will be characters in the text that can not be displayed, because no font that supports them is available to the computer. When this occurs, small boxes are shown to represent the characters. We call those small boxes “tofu,” and we want to remove tofu from the Web. This is how the Noto font families got their name.

Noto helps to make the web more beautiful across platforms for all languages. Currently, Noto covers over 30 scripts, and will cover all of Unicode in the future. This is the Sans Japanese family. It has Regular and Bold styles and is hinted.

Noto fonts are intended to be visually harmonious across multiple languages, with compatible heights and stroke thicknesses. For the currently released Noto fonts see code.google.com/p/noto/

Note: Noto Sans Japanese has been subsetted to 6,934 characters and contains most of the characters defined by JIS X 0208. This includes 6,355 Kanji as well as 579 non Kanji characters.

Link

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

Example

font-family: 'Noto Sans Japanese', serif;

Apache License, version 2.0 | Download

 

 

 

ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890,./<>?:;"'{}[]`-=\~!@#$%^&*()_+|
가각간갇갈갉갊감갑값갓갔강갖갗같갚갛개객갠갤갬갭갯갰갱갸갹갼걀걋걍걔걘걜거걱건걷걸걺검겁것겄겅겆겉겊겋게겐겔겜겝겟겠겡겨격겪견겯결겸겹겻겼경곁계곈곌곕곗고곡곤곧골곪곬곯곰곱곳공곶과곽관괄괆괌괍괏광괘괜괠괩괬괭괴괵괸괼굄굅굇굉교굔굘굡굣구국군굳굴굵굶굻굼굽굿궁궂궈궉권궐궜궝궤궷귀귁귄귈귐귑귓규균귤그극근귿글긁금급긋긍긔기긱긴긷길긺김깁깃깅깆깊까깍깎깐깔깖깜깝깟깠깡깥깨깩깬깰깸깹깻깼깽꺄꺅꺌꺼꺽꺾껀껄껌껍껏껐껑께껙껜껨껫껭껴껸껼꼇꼈꼍꼐꼬꼭꼰꼲꼴꼼꼽꼿꽁꽂꽃꽈꽉꽐꽜꽝꽤꽥꽹꾀꾄꾈꾐꾑꾕꾜꾸꾹꾼꿀꿇꿈꿉꿋꿍꿎꿔꿜꿨꿩꿰꿱꿴꿸뀀뀁뀄뀌뀐뀔뀜뀝뀨끄끅끈끊끌끎끓끔끕끗끙끝끼끽낀낄낌낍낏낑나낙낚난낟날낡낢남납낫났낭낮낯낱낳내낵낸낼냄냅냇냈냉냐냑냔냘냠냥너넉넋넌널넒넓넘넙넛넜넝넣네넥넨넬넴넵넷넸넹녀녁년녈념녑녔녕녘녜녠노녹논놀놂놈놉놋농높놓놔놘놜놨뇌뇐뇔뇜뇝뇟뇨뇩뇬뇰뇹뇻뇽누눅눈눋눌눔눕눗눙눠눴눼뉘뉜뉠뉨뉩뉴뉵뉼늄늅늉느늑는늘늙늚늠늡늣능늦늪늬늰늴니닉닌닐닒님닙닛닝닢다닥닦단닫달닭닮닯닳담답닷닸당닺닻닿대댁댄댈댐댑댓댔댕댜더덕덖던덛덜덞덟덤덥덧덩덫덮데덱덴델뎀뎁뎃뎄뎅뎌뎐뎔뎠뎡뎨뎬도독돈돋돌돎돐돔돕돗동돛돝돠돤돨돼됐되된될됨됩됫됴두둑둔둘둠둡둣둥둬뒀뒈뒝뒤뒨뒬뒵뒷뒹듀듄듈듐듕드득든듣들듦듬듭듯등듸디딕딘딛딜딤딥딧딨딩딪따딱딴딸땀땁땃땄땅땋때땍땐땔땜땝땟땠땡떠떡떤떨떪떫떰떱떳떴떵떻떼떽뗀뗄뗌뗍뗏뗐뗑뗘뗬또똑똔똘똥똬똴뙈뙤뙨뚜뚝뚠뚤뚫뚬뚱뛔뛰뛴뛸뜀뜁뜅뜨뜩뜬뜯뜰뜸뜹뜻띄띈띌띔띕띠띤띨띰띱띳띵라락란랄람랍랏랐랑랒랖랗래랙랜랠램랩랫랬랭랴략랸럇량러럭런럴럼럽럿렀렁렇레렉렌렐렘렙렛렝려력련렬렴렵렷렸령례롄롑롓로록론롤롬롭롯롱롸롼뢍뢨뢰뢴뢸룀룁룃룅료룐룔룝룟룡루룩룬룰룸룹룻룽뤄뤘뤠뤼뤽륀륄륌륏륑류륙륜률륨륩륫륭르륵른를름릅릇릉릊릍릎리릭린릴림립릿링마막만많맏말맑맒맘맙맛망맞맡맣매맥맨맬맴맵맷맸맹맺먀먁먈먕머먹먼멀멂멈멉멋멍멎멓메멕멘멜멤멥멧멨멩며멱면멸몃몄명몇몌모목몫몬몰몲몸몹못몽뫄뫈뫘뫙뫼묀묄묍묏묑묘묜묠묩묫무묵묶문묻물묽묾뭄뭅뭇뭉뭍뭏뭐뭔뭘뭡뭣뭬뮈뮌뮐뮤뮨뮬뮴뮷므믄믈믐믓미믹민믿밀밂밈밉밋밌밍및밑바박밖밗반받발밝밞밟밤밥밧방밭배백밴밸뱀뱁뱃뱄뱅뱉뱌뱍뱐뱝버벅번벋벌벎범법벗벙벚베벡벤벧벨벰벱벳벴벵벼벽변별볍볏볐병볕볘볜보복볶본볼봄봅봇봉봐봔봤봬뵀뵈뵉뵌뵐뵘뵙뵤뵨부북분붇불붉붊붐붑붓붕붙붚붜붤붰붸뷔뷕뷘뷜뷩뷰뷴뷸븀븃븅브븍븐블븜븝븟비빅빈빌빎빔빕빗빙빚빛빠빡빤빨빪빰빱빳빴빵빻빼빽뺀뺄뺌뺍뺏뺐뺑뺘뺙뺨뻐뻑뻔뻗뻘뻠뻣뻤뻥뻬뼁뼈뼉뼘뼙뼛뼜뼝뽀뽁뽄뽈뽐뽑뽕뾔뾰뿅뿌뿍뿐뿔뿜뿟뿡쀼쁑쁘쁜쁠쁨쁩삐삑삔삘삠삡삣삥사삭삯산삳살삵삶삼삽삿샀상샅새색샌샐샘샙샛샜생샤샥샨샬샴샵샷샹섀섄섈섐섕서석섞섟선섣설섦섧섬섭섯섰성섶세섹센셀셈셉셋셌셍셔셕션셜셤셥셧셨셩셰셴셸솅소속솎손솔솖솜솝솟송솥솨솩솬솰솽쇄쇈쇌쇔쇗쇘쇠쇤쇨쇰쇱쇳쇼쇽숀숄숌숍숏숑수숙순숟술숨숩숫숭숯숱숲숴쉈쉐쉑쉔쉘쉠쉥쉬쉭쉰쉴쉼쉽쉿슁슈슉슐슘슛슝스슥슨슬슭슴습슷승시식신싣실싫심십싯싱싶싸싹싻싼쌀쌈쌉쌌쌍쌓쌔쌕쌘쌜쌤쌥쌨쌩썅써썩썬썰썲썸썹썼썽쎄쎈쎌쏀쏘쏙쏜쏟쏠쏢쏨쏩쏭쏴쏵쏸쐈쐐쐤쐬쐰쐴쐼쐽쑈쑤쑥쑨쑬쑴쑵쑹쒀쒔쒜쒸쒼쓩쓰쓱쓴쓸쓺쓿씀씁씌씐씔씜씨씩씬씰씸씹씻씽아악안앉않알앍앎앓암압앗았앙앝앞애액앤앨앰앱앳앴앵야약얀얄얇얌얍얏양얕얗얘얜얠얩어억언얹얻얼얽얾엄업없엇었엉엊엌엎에엑엔엘엠엡엣엥여역엮연열엶엷염엽엾엿였영옅옆옇예옌옐옘옙옛옜오옥온올옭옮옰옳옴옵옷옹옻와왁완왈왐왑왓왔왕왜왝왠왬왯왱외왹왼욀욈욉욋욍요욕욘욜욤욥욧용우욱운울욹욺움웁웃웅워웍원월웜웝웠웡웨웩웬웰웸웹웽위윅윈윌윔윕윗윙유육윤율윰윱윳융윷으윽은을읊음읍읏응읒읓읔읕읖읗의읜읠읨읫이익인일읽읾잃임입잇있잉잊잎자작잔잖잗잘잚잠잡잣잤장잦재잭잰잴잼잽잿쟀쟁쟈쟉쟌쟎쟐쟘쟝쟤쟨쟬저적전절젊점접젓정젖제젝젠젤젬젭젯젱져젼졀졈졉졌졍졔조족존졸졺좀좁좃종좆좇좋좌좍좔좝좟좡좨좼좽죄죈죌죔죕죗죙죠죡죤죵주죽준줄줅줆줌줍줏중줘줬줴쥐쥑쥔쥘쥠쥡쥣쥬쥰쥴쥼즈즉즌즐즘즙즛증지직진짇질짊짐집짓징짖짙짚짜짝짠짢짤짧짬짭짯짰짱째짹짼쨀쨈쨉쨋쨌쨍쨔쨘쨩쩌쩍쩐쩔쩜쩝쩟쩠쩡쩨쩽쪄쪘쪼쪽쫀쫄쫌쫍쫏쫑쫓쫘쫙쫠쫬쫴쬈쬐쬔쬘쬠쬡쭁쭈쭉쭌쭐쭘쭙쭝쭤쭸쭹쮜쮸쯔쯤쯧쯩찌찍찐찔찜찝찡찢찧차착찬찮찰참찹찻찼창찾채책챈챌챔챕챗챘챙챠챤챦챨챰챵처척천철첨첩첫첬청체첵첸첼쳄쳅쳇쳉쳐쳔쳤쳬쳰촁초촉촌촐촘촙촛총촤촨촬촹최쵠쵤쵬쵭쵯쵱쵸춈추축춘출춤춥춧충춰췄췌췐취췬췰췸췹췻췽츄츈츌츔츙츠측츤츨츰츱츳층치칙친칟칠칡침칩칫칭카칵칸칼캄캅캇캉캐캑캔캘캠캡캣캤캥캬캭컁커컥컨컫컬컴컵컷컸컹케켁켄켈켐켑켓켕켜켠켤켬켭켯켰켱켸코콕콘콜콤콥콧콩콰콱콴콸쾀쾅쾌쾡쾨쾰쿄쿠쿡쿤쿨쿰쿱쿳쿵쿼퀀퀄퀑퀘퀭퀴퀵퀸퀼큄큅큇큉큐큔큘큠크큭큰클큼큽킁키킥킨킬킴킵킷킹타탁탄탈탉탐탑탓탔탕태택탠탤탬탭탯탰탱탸턍터턱턴털턺텀텁텃텄텅테텍텐텔템텝텟텡텨텬텼톄톈토톡톤톨톰톱톳통톺톼퇀퇘퇴퇸툇툉툐투툭툰툴툼툽툿퉁퉈퉜퉤튀튁튄튈튐튑튕튜튠튤튬튱트특튼튿틀틂틈틉틋틔틘틜틤틥티틱틴틸팀팁팃팅파팍팎판팔팖팜팝팟팠팡팥패팩팬팰팸팹팻팼팽퍄퍅퍼퍽펀펄펌펍펏펐펑페펙펜펠펨펩펫펭펴편펼폄폅폈평폐폘폡폣포폭폰폴폼폽폿퐁퐈퐝푀푄표푠푤푭푯푸푹푼푿풀풂품풉풋풍풔풩퓌퓐퓔퓜퓟퓨퓬퓰퓸퓻퓽프픈플픔픕픗피픽핀필핌핍핏핑하학한할핥함합핫항해핵핸핼햄햅햇했행햐향허헉헌헐헒험헙헛헝헤헥헨헬헴헵헷헹혀혁현혈혐협혓혔형혜혠혤혭호혹혼홀홅홈홉홋홍홑화확환활홧황홰홱홴횃횅회획횐횔횝횟횡효횬횰횹횻후훅훈훌훑훔훗훙훠훤훨훰훵훼훽휀휄휑휘휙휜휠휨휩휫휭휴휵휸휼흄흇흉흐흑흔흖흗흘흙흠흡흣흥흩희흰흴흼흽힁히힉힌힐힘힙힛힝

 

본고딕을 웹폰트로 사용하자면 크기를 줄여야 하는데 우리나라에서 일반적으로 폰트의 글자 수는 완성형 2350개를 사용하므로 이 글자만 추려서 줄였습니다. 본래의 글자 수는 11,172에 해당합니다. 한글 전용이기에 영문은 키보드에 있는 알파벳, 숫자, 기호만 포함했습니다.

 

 

폰트의 종류는 Thin, Light, DemiLight, Regular, Medium, Bold, Black 등 7가지 입니다.

 

 

웹폰트 사용법은 아래의 서울서체 사용법을 참고하면 됩니다.

 

http://martian36.tistory.com/1392

 

conveted.zip

 

많이 사용하는 나눔고딕은 모서리가 약간 둥글지만 본고딕은 각이 있습니다. 블로그 본문 글에 사용 시에는 DemiLight나 Regular를 사용하면 됩니다. 

 

@import url("https://googledrive.com/host/0BxmAw3HA4YGCfkljOGVJb3RMR200clRfUTVVdXlaRElPRTV3VGlNZVZ3ay1EYjdiZjJockk/notokr-regular.css");
@import url("https://googledrive.com/host/0BxmAw3HA4YGCfndGUGZVNzBEbVdkZGg0M0R1OElFeXcteXFVNUFOYlQ4TUdNWHZVQlJHaXM/notokr-black.css");
@import url("https://googledrive.com/host/0BxmAw3HA4YGCfnV0d3J5S21BSFdGUXctekQ1eHJoczF2OUcyTGZna3laMlg2MWR6cWoyV1E/notokr-bold.css");
@import url("https://googledrive.com/host/0BxmAw3HA4YGCfnVVTFJoaHQ2R0xQNURCSmp0M1BrWVQ5SVFKN05uaTRabC1XeFRpUm51T2c/notokr-demilight.css");
@import url("https://googledrive.com/host/0BxmAw3HA4YGCfk5lRk1WVjhQWVRHRldCVEw0TU1qMHhvNEdfM1E0cjZ1Z2ZHRDFfcWRVSDA/notokr-light.css");
@import url("https://googledrive.com/host/0BxmAw3HA4YGCfmN1U19nTHpWVFd2NHA2dXJ4c0FvOEdVcF9mc3ZfcWNyZjRDZ2plMy12SzQ/notokr-medium.css");
@import url("https://googledrive.com/host/0BxmAw3HA4YGCflRiaUxHOFVCcXVfWmpqeERVZ3AzcDAtM2FRV25XclJDRnVrTVVqamZJcEE/notokr-thin.css");

구글 드라이브에 파일을 업로드 했으니 스타일시트에 위처럼 사용할 수도 있습니다. 경로가 길어서 구글의 URL 단축기(Shortner)를 사용해봤지만 적용이 안됩니다. 서버에 설치하면 보다 짧아지겠는데 제 서버는 트래픽 제한이 있어서 많은 링크가 있을 경우 감당하지 못할 것 같습니다.

 

.notokr-regular { font-family:notokr-regular !important; }
.notokr-black { font-family:notokr-black !important; }
.notokr-bold { font-family:notokr-bold !important; }
.notokr-demilight { font-family:notokr-demilight !important; }
.notokr-light { font-family:notokr-light !important; }
.notokr-medium { font-family:notokr-medium !important; }
.notokr-thin { font-family:notokr-thin !important; }

폰트 적용은 위와 같이 폰트 패밀리를 설정하면 됩니다. 위 @import 규칙을 사용해보시고 속도가 어떤지 점검해보세요. 구글은 서버가 가장 가까운 곳이 대만에 있지만 빠릅니다.

 

 

워드프레스 사이트에 적용해봤습니다.

 

 

Regular

 

 

Medium

 

 

Light

 

 

DemiLight

 

 

Bold

 

 

Black

 

저작자 표시 비영리 변경 금지
신고
BlogIcon 구름군단

오! 이쁜폰트네요.ㅎ 감사해요.^^

halftone

정보 감사합니다. ^^

BlogIcon 바리엘

감사합니다 항상 폰트가 고민이었는데 해결이 될 것 같네요^^
아, 그런데 혹시 폰트 내용물을 2350개만 뽑아내는 작업은 어떻게 하시는 건가요?

BlogIcon jyunipark

질문이있습니다. 본고딕의 용량이 너무 커서 웹폰트로의 사용을 권장하지 않는다고 하셨는데, 윗글에 다운받을 수 있도록 되어있는 conveted.zip 파일이 용량을 줄여 사용할 수 있도록 만들어주신것인가요?

redwind

유용한 좋은정보 너무 감사합니다. ^^

비밀댓글입니다

BlogIcon 베누시안

가능합니다.

BlogIcon 환타73

항상 큰 도움을 받고 있습니다. 고맙습니다~

서영맘

유용한 정보 감사합니다.
나눔웹폰트 대신할만한게 없나 고민하던중이었는데 본고딕이 저한테는 딱 맞는것 같더라구요.
다만 용량 때문에 쓰질 못하고 있었는데 경량화 된 파일로 이제서야 사용할 수 있을것 같네요^^
제 홈페이지에 빨리 적용해봐야겠습니다^^ 감사합니다.
그런데 본고딕은 원래 완전 무료 폰트로 알고 있는데요
위에서 다운 받은 파일로 홈페이지 제작 등의 상업적 용도로 사용해도 문제가 없는건가요?
즐거운 하루 되세요^^

비밀댓글입니다

BlogIcon 베누시안

웹폰트에 관한 것은 그다지 내용이 많지 않은 것이라서 책으로 나오지 않습니다. 본고딕은 무료로 아무나 사용해도 됩니다.

어한출

안녕하세요? 너무 좋은 정보 감사해요.
게다가 파일을 줄여서 무료로 배포해주셔서 더욱 감사합니다.
베누시안님의 포스팅 링크 좀 걸어가서 저도 포스팅 해도 되나요? ^^
당연히 출처 남기구요. ^^

BlogIcon 베누시안

복사해 사용하시면 안됩니다. 대부분의 경우 링크만 걸어놓습니다.

나은

잘 쓰겠습니다! 감사합니다~

kashu

안녕하세요 좋은 포스팅 감사해요:) 다름이 아니라 import url에서 구글드라이브에 올리신 notosanskr-light 링크가 404 떠서 적용이 안되는군요ㅠㅜ 제 드라이브에 올려서 그 링크로 해도 되는건가요? font family에 !important 부분이 뭘 뜻하는지 모르겠어서요..

BlogIcon 정명섭

자상한 설명과 친절한 공유에 감사드립니다. 사소한 오타 보고: conveted.zip → converted.zip

BlogIcon 베누시안

단어의 의미는 없는 것이라서 수정하지 않았습니다.

비밀댓글입니다

티스토리 툴바