CSS font-family 속성이란?
웹 디자인에서 텍스트 스타일링은 빼놓을 수 없는 핵심 요소입니다. 예를 들어 제목에는 특정 글꼴을 적용하거나, 페이지 전체 텍스트에 serif 계열 글꼴을 사용하고 싶을 수 있습니다.
바로 이럴 때 font-family 속성이 사용됩니다. CSS의 font-family 속성을 활용하면 웹 페이지의 텍스트에 하나 이상의 글꼴을 지정할 수 있습니다.
이번 글에서는 CSS font-family 속성의 기본 개념과 함께, 실제 예제를 통해 웹 페이지 텍스트에 글꼴을 적용하는 방법을 자세히 살펴보겠습니다.
CSS font-family 기본 문법
CSS에서 글꼴을 스타일링하는 요소는 색상 설정부터 글자 크기 지정까지 다양합니다. 그중에서도 가장 중요한 부분 중 하나가 바로 글꼴 계열(font family), 즉 웹 페이지 텍스트에 사용될 서체를 정하는 것입니다.
font-family 속성의 기본 문법은 다음과 같습니다.
font-family: fontFamilyOne, fontFamilyTwo, ...;
font-family 속성은 단일 글꼴 또는 여러 개의 글꼴 목록을 값으로 받습니다. 둘 이상의 글꼴을 지정할 때는 각 글꼴을 쉼표(,)로 구분해야 합니다.
글꼴이 나열된 순서는 곧 브라우저가 해당 글꼴을 적용하려고 시도하는 순서이기도 합니다. 브라우저는 목록에서 설치되어 있거나 다운로드 가능한 첫 번째 글꼴을 기본으로 사용하며, 해당 글꼴을 사용할 수 없으면 두 번째 글꼴로 넘어갑니다.
또 한 가지 주목할 점은, font-family 속성은 텍스트 블록 내 문자별로 글꼴을 선택한다는 것입니다. 따라서 특정 문자가 첫 번째 글꼴에 포함되어 있지 않다면, 적절한 글꼴을 찾을 때까지 목록의 다음 글꼴이 순차적으로 시도됩니다.
font-family 속성을 사용할 때는 최소한 하나의 제네릭(generic) 글꼴 계열(예: serif, sans-serif, monospace)을 함께 명시하는 것이 좋습니다. 이렇게 하면 목록의 다른 글꼴을 사용할 수 없는 경우에도 브라우저가 대체 글꼴을 선택해 텍스트를 정상적으로 표시할 수 있습니다.
제네릭 글꼴 계열(Generic Font Families)
font-family 속성은 크게 두 가지 방식으로 사용할 수 있습니다. 첫째, 웹 페이지에 특정 커스텀 글꼴을 지정하는 방식이고, 둘째, 텍스트에 제네릭 글꼴 계열을 적용하는 방식입니다. font-family 속성에서 사용할 수 있는 주요 제네릭 글꼴 계열은 다음과 같습니다.
- serif: 삐침(세리프)이 있는 명조 계열 서체 (예: Lucida Bright, Palladio)
- sans-serif: 삐침이 없는 고딕 계열 서체 (예: Open Sans, Trebuchet MS)
- monospace: 모든 문자의 폭이 동일한 고정폭 서체 (예: Menlo)
- cursive: 필기체처럼 획이 이어지는 서체 (예: Lucida Calligraphy)
- fantasy: 시선을 끌기 위한 장식적인 서체 (예: Papyrus)
이 외에도 더 많은 제네릭 글꼴 계열이 있으며, 자세한 내용은 Mozilla의 CSS font-family 공식 문서에서 확인할 수 있습니다.
CSS font-family 실전 예제
font-family 속성의 기본 개념을 익혔으니, 실제 동작 예제를 통해 살펴보겠습니다.
시애틀 우표 동호회(Seattle Stamp Club)에서 웹사이트 일부 텍스트의 글꼴을 변경해 달라는 의뢰를 받았다고 가정해 보겠습니다.
예제 1: h1 제목에 글꼴 지정하기
먼저 'Contact' 페이지의 모든 <h1> 제목을 'Open Sans' 글꼴로 변경해 달라는 요청을 받았습니다. 즉, Contact 페이지의 'Contact Us' 제목이 Open Sans로 표시되어야 하며, 해당 글꼴을 사용할 수 없는 경우 제네릭 sans-serif 계열이 적용되어야 합니다. 다음 코드로 이 작업을 처리할 수 있습니다.
<html>
<h1>Contact Us</h1>
<style>
h1 {
font-family: "Open Sans", sans-serif;
}
</style>
</html>
HTML 코드에서는 <h1> 태그를 사용해 'Contact Us'라는 제목을 만들었습니다. 그리고 CSS 코드에서는 font-family 속성으로 웹 페이지의 모든 <h1> 요소 글꼴을 정의했습니다.
font-family 속성에 지정한 값 덕분에 모든 <h1> 요소는 Open Sans 글꼴로 표시되며, 이 글꼴을 사용할 수 없을 경우 제네릭 sans-serif 계열이 대신 적용됩니다. 이를 위해 두 글꼴을 쉼표로 구분하여 지정했습니다.
예제 2: p 태그에 글꼴 지정하기
이번에는 우표 동호회 Contact 페이지의 모든 <p>(단락) 요소를 Times 글꼴로 스타일링해 보겠습니다. 해당 글꼴을 사용할 수 없다면 기본 serif 글꼴이 적용되어야 합니다. 다음 코드를 사용하면 됩니다.
<html>
<p>Are you interested in learning more about the Seattle Stamp Club? Contact us today!</p>
<style>
p {
font-family: "Times", serif;
}
</style>
</html>
위 예제에서는 <p> 태그로 텍스트 단락을 선언한 뒤, CSS 스타일시트에서 모든 <p> 태그의 font-family를 Times와 serif로 설정했습니다. 기본적으로 브라우저는 모든 <p> 태그를 Times 글꼴로 렌더링하려 시도하며, 이 글꼴을 사용할 수 없으면 serif 글꼴이 대신 사용됩니다.
마무리
CSS font-family 속성을 사용하면 웹 페이지 텍스트의 서체를 자유롭게 지정할 수 있습니다. 예를 들어 페이지 전체 텍스트에 'Arial' 글꼴이나 'cursive' 제네릭 글꼴을 적용하는 것도 가능합니다.
이번 글에서는 CSS font-family 속성의 기본 개념과 실전 예제를 통해 웹 페이지 텍스트 스타일링 방법을 살펴보았습니다. 이제 여러분도 프로 웹 디자이너처럼 font-family 속성을 자유자재로 활용할 준비가 되셨습니다!