여러분의 이야기와 글이 블로그 또는 웹사이트의 고기와 감자라는 것은 의심할 여지가 없다. 아름다운 색상 및 사진과 더불어 이런 이야기는 웹사이트의 스토리를 전한다. 그러나, 글꼴 선택에 주의를 기울여야 한다. 테마를 디자인할 때 선택한 글꼴은, 여러분의 작품을 한 페이지 또는 두 페이지 이상 읽어보기 위해, 사람들이 머무르게 하는데 영향을 미친다.
글꼴은 다양한 형태와 스타일이 있지만, 불행하게도, 사용자가 실제로 해당 글꼴을 자신의 컴퓨터에 가지고 있지 않으면, 원하는 글꼴이 아닌 generic serif 또는 sans-serif와 같이 "비슷한" 글꼴로 보이게 된다. 컴퓨터에 설치된 글꼴 목록을 보려면, 아래의 글꼴 사이트 또는 글꼴 테스트 사이트를 방문한다. 여러분의 글꼴이 거기에 있으면, 그 글꼴을 볼 수 있다. 글꼴이 없으면, generic Courier 글꼴을 보게 된다.
테마의 스타일시트 (style.css)에서, 글꼴(표시할 글꼴 목록), 글꼴 색, 글꼴 크기 및 글꼴의 다른 측면을 제어할 수 있다. 다음은 사이드바 메뉴의 글꼴, 글꼴 크기의 높이는 1em로, 글꼴 색은 파랑색으로 설정하는 예제이다:
#menu {font-family: Verdana, Arial, Helvetica,
sans-serif; font-size:1em; color:blue; }
보는 바와 같이, 하나 이상의 글꼴을 설정하였다. 사용자가 Verdana 글꼴이 없으면, Arial 글꼴이 표시된다. Verdana와 Arial 글꼴이 없으면, Helvetica 글꼴을 사용한다. 모든 글꼴이 없으면, 사용자의 시스템 글꼴이 표시되고, sans-serif 기본 글꼴을 사용하게 된다. 이 선택 목록은 디자이너가 글꼴을 제어하는데 도움이 되고, 일관성 있는 "모양과 느낌을(look and feel)" 보장하게 된다.
글꼴은 보통 한 단어이지만, Lucida Console와 같이 두 단어 이상일 수 있다. 이것은 스타일 선택자에 다음과 같이 따옴표로 감싸야 한다:
#menu {font-family: Verdana, Arial, Helvetica,
"Lucida Console", sans-serif;.....
워드프레스 테마는 다양한 방법으로 글꼴을 사용한다. 항상 일관성이 있지는 않다. 테마를 디자인할 때, 테마 저자의 결정 및 필요에 따라 달라진다. 웹사이트 영역마다 다른 글꼴이 발견될 수 있다. 헤더, 사이드바, 콘텐츠 영역 마다 다른 글꼴을 설정할 수 있다. 사용자가 변경할 글꼴을 찾는 것은, 어려울 수 있다.
글꼴이 여러 곳에 있을 수 있기 때문에, 변경할 글꼴을 찾는 것은 어려울 수 있다. 일반적으로, 전체 글꼴은 웹사이트의 body에 설정된다.
body {font-family: Verdana, Arial, Helvetica,
Futura, sans-serif;
font-size: 1em;
padding:0;
margin:0; }
이것은 사이트의 특정 태그, class 또는 div로 정의되지 않은 곳에 이 글꼴을 적용한다. 이것은 "예비(fall-back) 글꼴"이다.
사이트 헤더의 글꼴은 일반적으로 header div 안에서 발견되고, 사이드바 또는 메뉴와 푸터 스타일 divisions에서도 동일하다. 그렇지만, 콘텐츠는 추적하기가 어려울 수 있다.
콘텐츠 영역 안의 글꼴은 종종 다음과 같은 CSS 클래스(classe)에서 발견되지만, 항상 그렇지는 않다 :
특정 클래스(class) 또는 문단(paragraph) 태그에 글꼴 정보가 있을 수도 있다:
.content p { margin:5px;
padding:5px;
font-family: Tahoma, Verdana, Helvetica, sans-serif;
font-size: 110%;
color: black; }
사이드바 또는 메뉴 중첩 목록 안의 글꼴은 좁히기가 어려울 수 있다. 많은 워드프레스 사이트에서 발견되는 중첩 목록에 대한 단계별 스타일링 방법은, CSS로 목록 스타일링 문서를 참조한다.
특정 글꼴 코드를 추적하기 어려우면, 스타일 찾는 방법 문서의 팁과 기법을 사용해보자.
사이트에 적용할 글꼴을 결정하는 것은 개인적인 선택 사항이다. 그러나 결정에 도움에 되는 문서들이 있다. 대부분의 컴퓨터에서 가장 일반적으로 발견되는 글꼴을 사용하여 시작하는 것이 좋다. 그리고 읽기 편하다.
가장 인기 있는 글꼴을 알아보려면, 다음을 확인한다:
설치할 때 운영 체제와 함께 제공되는, Arial, Verdana, Tahoma, Georgia와 같은 기존 글꼴을 사용하는 것 이외에, styles.css에서 CSS를 사용하여, 페이지 요소에 대한 글꼴을 정의할 수 있다. 그밖에, 외부 글꼴을 사용할 수 있다 - 이것은 사용자가 자신의 컴퓨터에 해당 글꼴이 없어도 된다는 의미이다. @font-face 규칙을 사용하여 글꼴을 정의한다. style.css 상단에 아래와 같은 코드를 입력한다:
@font-face {
font-family: Museo300;
src: local('Museo300-Regular'),
url("fonts/Museo300-Regular.ttf") format('truetype');
font-weight: normal;
}
그리고 나중에 다음과 같이 사용한다:
.post-item {font-family: Museo300}
다음 링크에서 @font-face 규칙에 대한 추가 정보를 얻을 수 있다:
글꼴 크기를 변경할 수도 있다. 타자기 시대와 요즘의 워드프로세서 및 데스크탑 출판 소프트웨어에서도, 여전히 "point" 시스템을 사용하고 있다. "12pt Times Roman" 및 "8pt Arial"와 같은 것에 익숙할 것이다. Point 크기는, 대부분의 브라우저에서 "point"를 해석하지 못하기 때문에, 웹페이지에서 잘 작동하지 않는다. 브라우저는 픽셀과 기본 크기의 퍼센트를 이해한다. 그러나 타자기 포인트 크기는 브라우저마다 다르게 해석한다. 포인트 크기를 사용할 수는 있지만, 더 나은 대안이 있다.
글꼴 크기를 절대 수치(absolute)로 설정할 수 있다. 이것은 글꼴 크기가 고정된다는 의미이지만, 이것 역시 단점이 있다. 절대 글꼴 크기는' 사용자가 자신의 브라우저 "보기" 설정(보기 > 텍스트 크기)을 '크게'로 설정하거나 또는 , 시각적 또는 신체적 장애자를 위한 특정 소프트웨어를 사용하고 있다면, 크게 설정된 글꼴을 "볼 수 없는" 문제가 발생한다. 레이아웃이 잘 작동하는 특정 글꼴 크기로 설정하려면, 사이트에서 더 중요한 정보는 이 글꼴 크기를 사용해서는 안된다. 이 예제는 절대 글꼴 크기를 설정하는 방법이다:
#menu ul li {font-size: 12px; color: green; }
더 인기 있는 방법은 전체 문서의 글꼴 크기를 설정하는 방법이다. 그러면 이 크기는 모든 것의 상대 크기를 설정하는 기준이 된다. 기본 글꼴 크기의 퍼센트를 사용하면, 사용자가 선호하는 글꼴 크기를 기준으로 자체적으로 글꼴 크기를 조정할 수 있다:
body { font-size: 1em; }
#menu ul li { font-size: 110%; color: green; }
글꼴을 가지고 많은 재미있는 일을 할 수 있다! 글꼴을 기울임 꼴(italic), 굵게(bold) 또는 문단의 첫 문자를 다른 것보다 더 크게 만들 수 있다. 이 문서에서 워드프레스 사이트의 글꼴 스타일과 크기를 설정하는 방법을 간단하게 맛보았다. 사용할 글꼴, 글꼴 사용 방법, 글꼴 크기를 결정하는 방법은 더 많이 있다. 그리고 어떤 글꼴이 사이트에 가장 보기 좋은지 등. 브라우저마다 글꼴을 다른 방법으로 해석한다. 글꼴을 결정하는데 도움이 되는 추가 정보는 아래를 참조한다.