[워드프레스] crayon syntax highlighter에 bitstream vera sans mono 폰트

---

이 포스팅은 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를 구성하는 css와 ttf, 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 폰트가 적용된 것을 확인할 수 있다.