아이폰도 되는 한글 웹 글꼴 제공 사이트

웹 사이트를 풍부하게하는 웹 글꼴

한글은 상당히 뛰어난 문자다. 자소 문자이면서 영어와 달리 모아쓴다. 따라서 표현하는데 더 효율적이다. 그러나 한글을 웹에서 표현하려고 하면 항상 부족하다. 컴퓨터에 기본적으로 깔려 있는 글꼴이 너무 제한되기 때문이다. 이런 이유 때문에 꽤 많은 사이트에서 웹 글꼴을 사용한다. 그런데 이런 웹 글꼴은 윈도 기본 브라우저인 인터넷 탐색기에서만 사용할 수 있다. 오늘 소개하는 웹 글꼴은 이런 문제점을 해결한 웹 글꼴이다. 거의 모든 모바일 브라우저와 데스크탑용 브라우저를 지원한다.

알림

현재 모빌리스 웹 글꼴은 유료로 바뀌었습니다. 무료도 있지만 월 2만 다운로드까지만 무료이기 때문에 하루 방문자 수 1000이 넘으면 사용할 수 없습니다. 따라서 모빌리스 웹 글꼴을 사용하려는 분은 이 점을 기억하기 바랍니다. 참고로 모빌리스에서 제공하던 웹 글꼴을 다른 호스팅 서버에 올리고 이 글에서 소개한 방법으로 링크하면 잘 동작합니다. 제 블로그는 글꼴을 드롭박스에 올려 웹 글꼴을 사용하고 있습니다.

목차

웹 글꼴의 문제점

꽤 오래 전에 아이폰에서도 보이는 웹 글꼴

제목을 보면 알 수 있지만 아이폰에서도 웹 글꼴이 보인다. 제목으로 사용한 글꼴은 은옛체이다. 휴먼옛체와 비슷한데 아무래도 서체 자체는 은옛체 보다 휴먼옛체가 더 나아 보인다. 그러나 은옛체는 무료이기 때문에 이런 정도의 품질은 충분히 감내할만 하다고 생각한다.

모빌리스 웹 글꼴

따라서 전송량 문제만 없다면 원하는 웹 글꼴로 블로그나 홈페이지를 꾸밀 수 있다. 그런데 얼마 전 모빌리스라는 회사에서 이런 사람들 위한 '웹 글꼴 서비스'를 시작했다. 웹 글꼴을 내려받아 설치하는 방식이 아니라 모빌리스 서버의 웹 글꼴을 블로그나 홈페이지에서 바로 사용할 수 있도록 하는 서비스이다. 개인이나 비영리 조직은 자유롭게 사용할 수 있기 때문에 나처럼 설치형 블로그 운영자에게는 상당히 괜찮은 서비스다. 현재 제공하는 글꼴은 다음과 같다.

[#모빌리스 웹 글꼴] 글꼴분류 글꼴이름 글꼴코드 글꼴분류 글꼴이름 글꼴코드 나눔글꼴 나눔고딕 NanumGothicWeb 은글꼴2 은자모돋움 UnJamoDotumWeb 나눔고딕B NanumGothic... 은자모노벨 UnJamoNovelWeb 나눔고딕BB NanumGothic... 은자모소라 UnJamoSoraWeb 나눔명조 NanumMyeongjoWeb 은펜 UnPenWeb 나눔명조B NanumMyeongjo... 은펜흘림 UnPenheulimWeb 나눔손붓 NanumBrushWeb 은필기a UnPilgiaWeb 나눔손펜 NanumPenWeb 은신문 UnShinmunWeb 은글꼴1 은바탕 UnBatangWeb 은타자 UnTazaWeb 은바탕B UnBatangBoldWeb 은바다 UnVadaWeb 은디나루 UnDinaruWeb 은옛글 UnYetgulWeb 은디나루B UnDinaruBoldWeb 백묵글꼴 백묵바탕 Baekmuk-BatangWeb 은디나루L UnDinaruLightWeb 백묵돋움 Baekmuk-DotumWeb 은돋움 UnDotumWeb 백묵굴림 Baekmuk-GulimWeb 은돋움B UnDotumBoldWeb 백묵그래픽 Baekmuk-HeadlineWeb 은그래픽 UnGraphicWeb 렉시글꼴 렉시굴림 LexiGulimWeb 은그래픽B UnGraphicBoldWeb 렉시새봄 LexiSaebomRWeb 은궁서 UnGungseoWeb 은진글꼴 은진 EunjinWeb 은필기 UnPilgiWeb 은진반달 EunjinBandalWeb 은필기B UnPilgiBoldWeb 은진방울 EunjinBangwoolWeb 은글꼴2 은봄 UnBomWeb 은진구슬 EunjinGuseulWeb 은자모바탕 UnJamoBatangWeb 은진낙서 EunjinNakseoWeb

웹 글꼴 사용법

글꼴을 사용하는 방법은 두 가지가 있다. 하나는 'LINK 태그'를 이용해서 HTML 문서에 직접 집어넣는 방법이다. 만약 텍스트큐브 설치형이나 티스토리처럼 스킨 편집이 가능한 블로그라면 <head>와 </head> 태그 사이에 다음과 같은 코드를 삽입하면 된다. 또 글꼴을 바꾸고 싶다면 'UnYetgulWeb'만 윗 표의 글꼴 코드로 바꾸면 된다. STYLE 태그는 꼭 HEAD 태그에 올 필요는 없고 필요한 곳에 삽입하면 된다.

<head> <link href='http://api.mobilis.co.kr/webfonts/css/?fontface=UnYetgulWeb' rel='stylesheet' type='text/css' /> <style type="text/css"> h1 { font-family: 'UnYetgulWeb'; } </style> </head>

두번째 방법은 .CSS 파일에 웹 글꼴 코드를 직접 삽입하는 방법이다. 이 경우 자신이 사용하는 스킨의 스타일 파일(예: style.css)을 확인한 뒤 다음과 같은 코드를 삽입하면 된다. 여기서 font-family의 이름은 원하는 대로 지정하면 된다. 'UnYetgulWeb'처럼 영어를 사용해도 되고 다음 예처럼 구분하기 쉽게 '은옛글'로 지정해도 된다. 다만 @font-face에서 지정한 font-family와 실제 사용할 때 이름만 똑 같이 지정하면 된다.

@font-face { font-family:'은옛글'; font-style:normal; font-weight:700; src: url('http://api.mobilis.co.kr/webfonts/Un/UnYetgulCompact.woff') format('woff');} .titleBox h2 { font-family: '은옛글', 나눔고딕, 굴림; }

CSS에 삽입하는 글꼴 코드는 LINK 태그의 주소를 웹 브라우저에 직접 입력하면 알 수 있다. 즉, http://api.mobilis.co.kr/webfonts/css/? ··· etgulweb를 클릭하면 CSS에 삽입하는 코드가 보인다. 마지막으로 LINK 태그를 여러 개 사용하면 많은 웹 글꼴을 사용할 수 있다. 그러나 웹 글꼴은 파일 크기가 크기 때문에 될 수 있으면 최대 2~3개로 제한하는 것이 좋다.

관련 글타래

Powered by Textcube