반응형

이 포스팅은 2015년 10월 12일에 작성된 예전 블로그 글을 새로이 옮긴 것입니다. 참고바랍니다.


 

crayon syntax highlighter 플러그인은 다양한 폰트를 지원한다.

그럼에도 원하는 폰트가 없을 경우에는 직접 추가하여 사용하면 된다.

여기서는 bitstream vera sans mono 폰트를 추가한다.

 

준비물

wp-content/plugins/crayon-syntax-highlighter/fonts/ 디렉터리의 여러 폰트중 ubuntu-mono 폰트를 예로 들면 다음과 같이 구성되어 있다.

  • ubuntu-mono.css
  • ubuntu-mono/ubuntu-mono-webfont.eot
  • ubuntu-mono/ubuntu-mono-webfont.woff
  • ubuntu-mono/ubuntu-mono-webfont.ttf
  • ubuntu-mono/ubuntu-mono-webfont.svg

 

font-face를 구성하는 cssttf, eot, woff, svg가 필요하다.

위와 동일하게 미리 제작한 bitstream vera sans mono 파일은 아래 링크에서 받을 수 있다.

 

bitstream-vera-sans-mono-webfont.zip
0.13MB

 

 

위 파일의 구성은 다음과 같다.

  • bitstream-vera-sans-mono.css
  • bitstream-vera-sans-mono/bitstream-vera-sans-mono-webfont.eot
  • bitstream-vera-sans-mono/bitstream-vera-sans-mono-webfont.woff
  • bitstream-vera-sans-mono/bitstream-vera-sans-mono-webfont.ttf
  • bitstream-vera-sans-mono/bitstream-vera-sans-mono-webfont.svg

 

만약 다른 폰트를 사용하고 싶다면, 해당 폰트의 ttf, eot, woff, svg 파일를 준비한뒤, css만 수정하면 된다.

bitstream-vera-sans-mono.css의 내용은 다음과 같다.

@font-face {
font-family: 'BitstreamVeraSansMono';
src: url('bitstream-vera-sans-mono/bitstream-vera-sans-mono-webfont.eot');
src: url('bitstream-vera-sans-mono/bitstream-vera-sans-mono-webfont.eot?#iefix') format
('embedded-opentype'),
url('bitstream-vera-sans-mono/bitstream-vera-sans-mono-webfont.woff') format('woff'),
url('bitstream-vera-sans-mono/bitstream-vera-sans-mono-webfont.ttf') format('truetype'),
url('bitstream-vera-sans-mono/bitstream-vera-sans-mono-webfont.svg#BitstreamVeraSansMono
') format('svg');
font-weight: normal;
font-style: normal;
}
.crayon-font-bitstream-vera-sans-mono * {
font-family: Bitstream Vera Sans Mono, 'BitstreamVeraSansMono', Georgia !important;
}

 

설치 방법

  1. bitstream-vera-sans-mono-webfont.zip를 풀면 css 파일과 디렉터리가 생성된다.
  2. 위 파일을 FTP를 사용하여 /wp-content/plugins/crayon-syntax-highlighter/fonts/에 업로드한다.
  3. 소유자와 그룹을 기존 소유자와 그룹과 동일하게 변경한다. 여기서는 www-data:www-data코드로 변경.
    • sudo chown -R www-data.wwwdata bitstream-vera-sans-mono*

 

이제 Bitstream Vera Sans Mono 폰트가 적용된 것을 확인할 수 있다.

반응형
  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">