본문으로 바로가기

웹폰트(@font-face) 적용법 #2 - Cufon 폰트

category 웹코딩/CSS 2012. 12. 30. 03:18

Cufon 폰트를 실제로 사용하려면 Generator를 거쳐 변환하는 과정을 거쳐야 하는데 번거롭거니와 한글폰트를 사용하는데에는 많은 애로사항이 꽃피웁니다. 첨부된 파일을 사용해서 적용해 봅시다.

Cufon 폰트

cufon 폰트는 일반 웹폰트와 달리 캔버스를 이용해 그림을 그리듯 글꼴을 표현하는 방법이다. 우선 첨부된 파일을 다운 받자.

cufon.zip

아래와 같은 글꼴이 첨가되어 있다.

cufon-yui.js 파일과 사용할 폰트를 계정에 업로드한다.

<head></head>사이에 아래 소스와 같이 붙여 넣는다.

<script src="경로명/cufon-yui.js"></script>    
<script src="경로명/NanumGothic_600.font.js"></script>   
<script type='text/javascript' charset='utf-8'>
Cufon.replace('.title, h2', { 
 hover: true,
 fontFamily: 'NanumGothic'
});
</script>
<!--[if gte IE 9]>
<script type="text/javascript">
Cufon.set('engine', 'canvas');
</script>
<![endif]-->
  • cufon-yui.js 파일은 반드시 포함해야 한다
  • 원하는 폰트를 포함한다
  • Cufon.replace('아이디명, 클래스명, 태그명', 과 같이 폰트를 사용할 HTML요소를 정해준다
  • fontFamily : '폰트명'을 적어준다. 이 폰트명은 첨부된 글꼴의 js를 열어보면 알수 있다
  • IE 9버전 이하는 캔버스를 포함하고 있지 않기때문에 이를 실행하게 해주는 조건부 주석문을 삽입한다

본문 글과 같이 규모가 큰 곳에 적용하면 사이트가 전체적으로 느려질 수 있으니 적당한 곳에 적당히 쓰도록 하자.


'웹코딩 > CSS' 카테고리의 다른 글

전체화면 배경고정 - FullScreenBackground  (20) 2013.01.02
opacity 와 rgba (Transparent)  (4) 2012.12.31
웹폰트(@font-face) 온라인 서비스  (1) 2012.12.30
웹폰트(@font-face) 적용법  (8) 2012.12.29
CSS로 이미지 대체하기  (0) 2012.12.01