현재 이 블로그에서 사용중인 구글 웹폰트 사용에 대해 적으려 한다. 전에 다루었듯이 구글 웹폰트는 상업적으로 무료로 사용할 수 있는 웹폰트다. 다만 구글 웹폰트에 한글 웹폰트는 별로 없다는 것이 문제이나 영어 폰트는 많다는 장점이 있다. 뭐니 해도 상업적으로 무료로 사용할 수 있다는 것이 매력적인 것 같다. 구글 웹폰트에 등록한 한글 폰트도 저작권에 문제없는 폰트를 등록한 것이라 생각하면 된다.
웹폰트의 이해
이 페이지 내용을 이해하기 위해서는 웹폰트와 일반적으로 사용하는 폰트의 차이를 이해해야 한다. 웹폰트는 일반적으로 생각하는 컴퓨터에 설치해서 사용하는 것이 아니라 웹사이트에서 사용하는 폰트라 이해하면 될 것이다. 그러므로 포토샵 등 그래픽 프로그램은 웹사이트가 아니라 웹폰트를 사용할 수 없다는 것이다. 또 하나 웹폰트를 웹사이트에서 사용 설정하면 상대방의 컴퓨터에 폰트가 없어도 된다. 그래서 아래에서 설명할 Yanone Kaffeesatz라는 폰트가 없어도 상대방은 이 블로그를 볼 때 Yanone Kaffeesatz로 보이게 된다. 그래서 웹폰트는 아래와 같다고 일반적으로 생각하면 된다.
- 웹사이트에서 사용하는 폰트다
- 상대방의 컴퓨터에 폰트가 없어도 된다
구글 웹폰트
구글 웹폰트에 대한 영어 설명은 여기에서 볼 수 있고 요약하면 상업적으로 가능한 폰트를 올려 놓은 것이다. 한글 폰트는 대표적으로 나눔고딕이 있다. http://www.google.com/fonts/earlyaccess에서 찾기 바라면 사람들이 많이 사용하는 나눔고딕은 Nanum Gothic (Korean) 부분을 찾으면 되며 사용법도 나왔다. 참고로 거기서 한글 폰트를 모두 찾고 싶다면 영어로 검색어를 한국어인 korean을 검색해 찾을 수 있다. 참고로 웹폰트로 아닌 나눔고딕으로 나오게 했다면 위에서 말했듯 상대방의 컴퓨터에 나눔고딕이 있어야 한다. 웹폰트로 설정했다면 상대방의 컴퓨터에 없어도 된다. 나눔고딕으로 설정했다고 무조건 나눔고딕으로 나올 것이라 생각하지 말기 바란다.
네이버 블로그나 다음 블로그에서 나오는 폰트는 익스플로러에서만 나오는 웹폰트다. 하여튼 익스플로러는 피곤하다.
내가 사용한 웹폰트
http://www.google.com/fonts에서 다양한 영문 웹폰트가 있는데 내가 이 블로그에서 사용한 것은 Yanone Kaffeesatz라고 아래 그림 빨간색 검색창에 검색하면 된다. 거기에서 아래 초록색 사각형 버튼(Quick Use)을 눌러 사용하는 방법을 알면 된다. 여기에서 중요한 것은 웹폰트 이름이 아니고 사용하는 방법을 아는 것이다. 아래 티스토리 블로그에 적용하는 것인데 홈페이지에서 충분히 적용할 수 있다. 이 페이지에서 대부분의 영어와 숫자는 Yanone Kaffeesatz라고 생각하면 된다. 참고로 네이버 블로그나 다음 블로그에서는 불가능하니 해볼려 하지 말기 바란다.
적용하기
거기 3번 소스는 <head></head>사이에 stardard에 있는 소스를 아래 그림처럼 삽입하면 그 폰트를 사용할 수 있다는 말이다. 만약 standard가 아닌 @import를 선택하면 CSS에 소스를 넣을 수 있다. 그러면 이글루스 블로그에서는 <head></head>안에 넣는 것은 할 수 없고 @import를 사용하면 될 것이다.
그러면 Yanone Kaffeesatz 폰트를 사용할 곳에 font-family: 'Yanone Kaffeesatz', sans-serif; 라는 것을 입력하면 끝납니다. 예로 나는 최글 글, 최글 댓글,최근 트랙백의 폰트를 Yanone Kaffeesatz를 사용하려 아래럼 font-family: 'Yanone Kaffeesatz', sans-serif; 를 추가한다.
마치면서
- 구글 웹폰트에 무료로 사용할 수 있는 웹폰트가 굉장히 많다고 많이 사용하면 로딩이 느려지니 1~2개 정도 사용하면 적당할 것이다. 왜냐하면 웹사이트를 웹폰트로 표시하기 위해 상대방은 다운로드 받아야 하기 때문이다. 현재 나의 경우는 하나만을 사용한다.
- 티스토리 블로그에서 설정하는 방법은 알면 웬만한 곳에서 설정할 수 있다. 단 블로그나 사이트에서 HTML,CSS 편집이 가능해야 하니 네이버 블로그,다음 블로그에서는 하지 못한다.
무료 팩스
'블로그 > 티스토리' 카테고리의 다른 글
| 티스토리에서 사용할 수 있는 댓글창 (14) | 2014.11.12 |
|---|---|
| 블로그 지도 삽입 - 네이버 · 티스토리 · 다음 · 구글 (6) | 2014.11.01 |
| 스팸 트랙백에 대한 차단이 쉽지 않네. (6) | 2014.09.13 |
| 티스토리, 자유성 사용 여부에 따른 기능 (8) | 2014.09.03 |
| 티스토리에서 폰트 아이콘인 Font Awesome 사용하기 (10) | 2014.08.20 |
| 멋진 티스토리 반응형 기업 블로그를 봤다. (6) | 2014.08.11 |
| 티스토리 앱(어플)의 아쉬움 4가지 (6) | 2014.07.25 |
| 티스토리를 선택하게 하는 이유를 생각해보면 (13) | 2014.07.16 |
