델리 키포스

제 블로그로 들어오는 여러 가지 경로 중 구글을 통해 들어오는 경우를 관심있게 보고 있습니다. 최근에 ‘크롬 맑은 고딕’이라는 키워드로 들어오는 경우가 제법 있었습니다. 아마도 크롬에 맑은고딕을 적용하는 방법을 찾는 사람이 아닐까라고 생각해봅니다.  저도 굴림이나 돋움에 너무 질려서 웬만하면 나눔고딕으로 보고 싶은데 크롬 3.0에는 글꼴 강제 지정 기능이 없어 많이 아쉬웠었습니다.

그런데 오늘 혹시나 하는 마음에 크롬 확장 프로그램(extension)을 찾아보니 userContent라는 확장 프로그램이 있었습니다. 내용을 대충 읽어보니 사용자가 지정한 CSS를 모든 웹 페이지에 적용하는 확장 프로그램인 듯해서 설치를 진행해봤습니다.

우선 2010년 1월 현재 안정 채널(stable channel, 크롬 프로젝트에서는 버전 대신 채널이라는 용어을 사용하고 있네요)은 버전 3.x으로 확장 프로그램 기능을 지원하지 않습니다.  그래서 크롬 프로젝트 홈페이지에 가보니 베타 채널과 개발 채널을 설치할 수 있더군요. 아무래도 베타 채널이 조금 더 안정적이기 때문에 베타 채널을 설치했는데 다행이 베타 채널(ver 4.0)은 확장 프로그램을 지원하더군요.

그리고 userContent 확장 프로그램을 설치했습니다. 아직 사용자 CSS를 지정하지 않았기 때문에 웹 페이지를 열어도 아무런 변화가 없었습니다. ‘도구 메뉴 > 확장 프로그램’을 선택하면 확장 프로그램 페이지가 열리고 userContent 항목의 옵션 버튼을 클릭하면 사용자 CSS 입력 페이지가 열립니다.

* { font-family : '나눔고딕' !important; }

편집 창에 위 내용을 입력한 후 저장합니다. 그러면 크롬으로 여는 모든 페이지에 나눔고딕이 적용됩니다. 당연한 얘기지만 PC에 나눔고딕이 설치되어 있어야 합니다.

CSS 구문을 간단하게 살펴보면 *는 전체 선택자(universal selector)이며 해당 구문은 모든 엘리먼트(element)에 나눔고딕을 글꼴로 적용해라는 내용입니다. (만약 맑은고딕을 적용하려면 ‘나눔고딕’ 대신 ‘맑은 고딕’이라고 입력합니다.)  !important는 사용자 스타일의 우선 순위를 높게 합니다. 기본적으로 제작자(author)가 지정한  스타일이 사용자 스타일보다 우선 순위가 높습니다. 그러나 !important가 선언된 스타일의 경우 사용자 스타일이 더 높은 우선 순위를 갖게됩니다. 그래서 제작자 지정한 글꼴은 무시되고 사용자 지정한 나눔고딕이 웹 페이지에 적용됩니다.

* { font-family : sans-serif !important; }

사용자 스타일을 위에 내용으로 저장하면 브라우저에서 지정한 산세리프체 글꼴이 페이지에 적용됩니다. 이 방법은 사용자 지정 글꼴을 변경할 때 CSS 구분을 직접 편집하는 않고 브라우저가 지원하는 옵션 기능을 이용하기 때문에 CSS 문법에 익숙하지 않은 사용자들이 쉽게 사용할 수 있습니다. 사용자 지정 글꼴을 변경하려면 ‘기능 메뉴 > 옵션 > 고급설정 > 언어와 글꼴’에서 변경할 수 있습니다.

파이어폭스도 좋은 브라우저이긴 하지만 개인적으로 빠른 랜더링과 UI의 간결함 때문에 크롬을 더 좋아합니다. 그러나 지금까지는 크롬에 글꼴을 강제하는 기능이 없어 파이어폭스를 메인 브라우저로 사용하고 있었습니다. 하지만 크롬 4.0부터는 사용자 스타일 지정할 수 있기 때문에 더이상 크롬을 메인 브라우저로 사용하지 않을 이유가 없습니다. 크롬 좋아요~!

[ 추가 사항 ]
전체 선택자를 사용하는 경우 pre 엘리먼트에도 스타일이 적용됩니다. 그런데 pre 엘리먼트는 주로 프로그램 소스 코드를 출력할 때 사용되며 소스 코드는 고정폭 글꼴이 적용되는 것이 좋을 것 같아서 pre, code, samp 엘리먼트를 제외한 모든 block 엘리먼트와 inline 엘리먼트에 적용되도록 수정하였습니다.

p, h1, h2, h3, h4, h5, h6, ul, ol, dl, div, blockquote, form, hr, table, 
  fieldset, address, li, dt, dd, td, tt, i, b, big, small, em, string, 
  dfn, kbd, var, cite, abbr, acronym, a, q, sub, sup, span, bdo, input, 
  select, textarea, label, button, font 
{
  font-family : sans-serif !important;
}

키포스 미분류 css, 글꼴, 나눔고딕, 맑은고딕, 사용자스타일, 크롬, 폰트