font-family 속성

font-family 속성은 글꼴의 종류를 설정합니다.

구문

선택자 {
	font-family: 글꼴 이름;
}

주의사항

글꼴 이름에 공백이 포함된 경우, 예를 들어 Times New Roman과 같다면, 작은따옴표나 큰따옴표로 묶어야 합니다.

주의사항

쉼표로 구분하여 여러 유사한 글꼴을 나열할 수 있습니다. 브라우저가 목록에서 첫 번째 글꼴을 만나면, 사용자 컴퓨터에 해당 글꼴이 있는지 확인합니다. 해당 글꼴이 없으면, 목록의 다음 글꼴을 가져와 마찬가지로 존재하는지 분석합니다. 따라서 여러 글꼴을 지정하면 그 중 적어도 하나가 클라이언트 컴퓨터에서 발견될 가능성이 높아집니다.

목록은 일반적으로 글꼴 유형을 설명하는 키워드(모든 글꼴은 어떤 유형에 속합니다) - serif, sans-serif, cursive, fantasy 또는 monospace로 끝냅니다. 브라우저가 사용자 컴퓨터에서 지정된 글꼴 중 하나도 찾지 못하면, 지정된 유형의 글꼴 중 하나를 선택합니다.

글꼴 유형

유형	설명
`serif`	세리프(장식) 글꼴.
`sans-serif`	산세리프(장식 없음) 글꼴.
`cursive`	필기체 글꼴.
`fantasy`	아름다운 곡선과 특이한 효과가 있는 장식용 글꼴.
`monospace`	모든 문자의 너비가 동일한 고정폭 글꼴.

기본값: 브라우저에 기본으로 설정된 글꼴. 보통 Times New Roman입니다.

예제

글꼴에 Arial 패밀리를 지정합니다:

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: Arial;
}

예제

글꼴에 Times New Roman 패밀리를 지정합니다. 글꼴 이름이 여러 단어로 구성되어 있으므로 따옴표로 묶습니다:

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: "Times New Roman";
}

예제

글꼴에 serif 그룹의 글꼴을 지정합니다 (아마도 Times New Roman이 선택될 것입니다):

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: serif;
}

예제

글꼴에 sans-serif 그룹의 글꼴을 지정합니다 (아마도 Arial이 선택될 것입니다):

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: sans-serif;
}

예제

글꼴에 fantasy 그룹의 글꼴을 지정합니다 (해당 글꼴이 없을 경우 작동하지 않을 수 있습니다):

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: fantasy;
}

예제

글꼴에 monospace 그룹의 글꼴을 지정합니다 (문자가 모두 같은 크기가 됩니다):

<p>
	Lorem ipsum dolor sit amet.
</p>

p {
	font-family: monospace;
}