웹사이트의 기본 글꼴은 클라이언트 시스템에 설치된 기본 글꼴로 표시되는 것이 정상입니다. 윈도우에서는 ‘굴림’이나 ‘맑은 고딕’으로 보여지고 맥의 경우 ‘애플고딕’이나 ‘애플고딕네오’가 보여집니다.
이 글꼴들이 옛날에는 괜찮았지만, 최근 가독성이 좋은 예쁜 글꼴들이 등장하면서 상대적으로 보기 싫은(?) 글꼴이 되어버렸습니다.
영문글꼴의 경우 글꼴 파일의 크기가 크지 않아 웹폰트를 다운로드 하기에 큰 무리가 없으나, 한/중/일 글꼴 파일의 경우 파일 크기가 커지기 때문에 웹사이트 로딩 시 문제를 발생하기도 합니다. 아무리 인터넷이 빨라졌다 해도 글꼴 파일의 크기가 수십메가바이트가 되는 경우엔 화면이 다 뜬 후에도 글꼴이 적용되지 않는 경우가 허다합니다.
이에 따라 파일 크기가 작은 글꼴을 만들기 시작해 웹폰트에 적용하게 되었습니다.
한/중/일 통합 글꼴에서 한글만 놔두고 다 제거하거나 한글 글꼴 파일 중에서도 자주 사용하는 2350글자만 놔두고 모두 제거하는 방법으로 말이죠.
이런 방법들은 정식 출시된 글꼴 파일을 다운 받아 개인적으로 작업한 경우가 많습니다. 이런 파일들은 검색을 하면 직접 다운로드 받아 설치해 사용할 수 있습니다.
이번 글에서는 개인 작업 파일이 아닌 공식적으로 제공되는 파일로 첨삭되지 않은 cdn 제공의 정보를 모았습니다.
바로 사용할 수 있는 웹폰트를 정리해 봤습니다.
Webfont CDN
웹폰트
웹 폰트의 포맷은 비트스트림의 .pfr 형식과 마이크로소프트의 .eot 형식, 이렇게 2가지가 있었다. 하지만, .pfr은 넷스케이프와 모질라까지 지원하고 파일 형식을 공개하였음에도 불구하고 이제는 쓰이지 않고 있다. 반면, .eot는 마이크로소프트의 특정 버전 이상의 인터넷 익스플로러에서만 지원되고 파일 형식은 공개되지 않아 다른 웹 브라우저에서는 사용하지 못한다. .eot 형식은 MS의 WEFT 응용 프로그램을 이용해 제작할 수 있으며, 웹폰트가 사용될 사이트의 URL(인터넷 주소)을 넣을 수 있어 해당 URL이 아니면 사용할 수 없어 불법 사용 또한 어느 정도 막을 수 있다.
(출처: https://ko.wikipedia.org/wiki/%EC%BB%B4%ED%93%A8%ED%84%B0_%EA%B8%80%EA%BC%B4#.EC.9B.B9_.ED.8F.B0.ED.8A.B8)
Google Fonts
fonts.google.com
google.com/fonts
webfont – cdnjs.com – The free and open source CDN for web related …
cdnjs.com/libraries/webfont
FontCDN: A search tool for Google web fonts
fontcdn.org
jsDelivr – A free super-fast CDN for developers and webmasters
jsdelivr.com/?query=font
Adobe Edge Web Fonts
edgewebfonts.adobe.com
또한, 웹폰트로 할 수 있는 것이 하나 더 있습니다.
Glyphicons CDN
바로 Glyphicons. Icon font라고도 합니다. Font와 같은 파일로 되어있는 아이콘 모음입니다.
보통 CSS에서 적용해 사용할 수 있습니다.
Glyph
자체(字體), 자형(字形)은 글자의 모양을 가리킨다. 자체는 하나 이상의 자소로 이루어진다. 글리프(glyph)라는 개념은 자체의 문자 코드에서 뜻과 소리를 지니지 않은 도형 기호(구두점, 괄호, 공백 등)의 추상화를 포함한다.
(출처: https://ko.wikipedia.org/wiki/%EC%9E%90%EC%B2%B4)
Fort Awesome
fortawesome.com
Material Icon
design.google.com/icons
XE Icon
xpressengine.github.io/XEIcon
자신만의 아이콘 세트를 만들 수 있습니다.
icomoon
icomoon.io
Web & App 