본문 바로가기
팁에 대한 고찰

웹 폰트를 쉽게 추가하여 사용해 보자

by 로젠크로와싱 2012. 10. 15.
반응형

웹 홈페이지나 블로그를 하다 보면 글꼴을 적용하고 싶을 때가 많습니다. 저작권 때문에 막상 사용하고 싶어도 그러질 못합니다. 하지만 영문 폰트를 다른 폰트로 쉽게 적용할 수 있는 방법을 알려 드리겠습니다. 

바로 구글에서 지원하고 있는 웹 폰트가 있습니다. 이 웹 폰트 서비스는 영문 폰트만 지원하고 있는 점이 아쉽기는 하지만 다양한 영문 폰트를 한번에 로딩할 수 있다는 점에서 큰 장점입니다. 단, 많은 폰트를 적용하면 웹 로딩 속도가 느려질 지 모르니 적당한 폰트를 선택하세요.

구글 웹 폰트를 제공하는 홈페이지로 갑니다.(이동 또는 검색 창에서 구글 웹 폰트라고 검색) 이동하면 위 사진과 같은 화면이 로딩됩니다.

이 페이지에서 Add to Collection이라는 버튼을 클릭하면 그 폰트를 적용할 수 있습니다. 또는 Search에서 원하는 폰트를 검색할 수 있습니다. 

Review라는 버튼은 적용한 폰트로 어떤 글씨체인지 확인 할 수 있습니다. 문장으로 확인 가능하고, 선택사항이기때문에 그냥 패스합니다.

Use 버튼이 실체 코드를 생성하는 페이지입니다. 4가지 순서대로 진행하면 됩니다.

1. 선택한 글씨체를 어떤 크기로 어떤 효과를 줄 것인지 선택합니다.

2. Character Set 선택인데 옵션 사항으로 패스

3. <link>, CSS-@import, Javascript 로 로딩하는 방법이 3가지 있습니다.

제일 무난한 link 태그로 사용하시면 됩니다.

CSS에 각 #id, .classname 에 해당하는 곳에 font-family: '각 Font Name'; 를 추가하시면 간편하게 웹에서 폰트를 사용하실 수 있습니다.

반응형