crayon syntax highlighter에 bitstream vera sans mono 폰트 추가

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

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

  • 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 폰트가 적용된 것을 확인할 수 있다.

img01