CSS font-family, 웹 폰트를 정의하는 속성

FONT-FAMILY 속성이란?

CSS의 여러 속성 중 color와 함께 많이 사용되는 속성 같아요. font-family는 웹페이지에서 사용할 폰트(글꼴)을 정하는데 사용합니다. 요즘 웹페이지는 디자인 요소가 중요하고 특히 텍스트는 Typography라고 할 정도로 중요합니다.

 

글꼴이 일반 돋움체나 맑은고딕을 사용할 때보다 산돌고딕이나 프리텐다드를 사용하면 더 예뻐보이잖아요.

 

사용법

body {
  font-family: Arial, Helvetica, "Times New Roman";
}

• 위에서는 body를 예시로 들었습니다. 대부분 body에 전체 글꼴을 정의하더라구요
• font-family: 뒤에 글꼴을 입력합니다
• 폰트에 공백이 있을 경우는 따옴표로 묶어줘야 해요

 

예시

여러 폰트를 사용해본 예시입니다.

See the Pen font-family by 40's Programmer (@40sProgrammer) on CodePen.

 

폰트 이름을 여러개 쓰는 이유는?

여러 개의 폰트를 정하는 이유는 다양한 사용자의 컴퓨터 환경을 고려하기 위함이에요. 

 

첫 번째로 지정한 글꼴이 사용자의 컴퓨터에 설치되어 있다면 해당 글꼴을 사용합니다. 그러나 첫 번째 글꼴이 사용자의 컴퓨터에 없을 경우, 다음으로 지정한 글꼴을 시도하고, 그 다음으로 또 다른 글꼴을 시도하는 식으로 순차적으로 대체 글꼴을 찾아 사용합니다. 

 

만약 "font-family" 속성에 지정한 모든 글꼴이 사용자의 컴퓨터에 설치되지 않은 경우, 브라우저는 기본적인 일반 글꼴(일반적으로 serif, sans-serif, monospace) 중 하나를 기본값으로 사용합니다. 이러한 기본값은 브라우저에 미리 설정되어 있으며, 대부분의 사용자 시스템에서 호환되는 글꼴로 지정됩니다.