[CSS] #08 스타일 속성, CSS 글꼴 & 폰트 속성 완전 정리! font-family부터 웹폰트 사용법까지

 

 

안녕하세요, 토스트데브입니다!
오늘은 CSS에서 텍스트의 분위기와 개성을 결정짓는 핵심 요소, 바로 글꼴(Font)과 폰트 관련 속성에 대해 자세히 알아보겠습니다.

다양한 폰트를 설정하는 방법과 웹폰트를 불러오는 방법까지 함께 정리해볼게요.

 

 

1️⃣ font-family – 글꼴 지정

HTML 요소의 글꼴을 지정하는 가장 기본적인 속성입니다.

p {
  font-family: Arial, sans-serif;
}

 

✅ 여러 폰트를 쉼표(,)로 나열하는 이유:

• 앞의 글꼴이 사용 불가능할 경우, 다음 글꼴로 대체
• 마지막에는 항상 글꼴 계열(generic family)을 적어야 함

계열	설명
serif	바 있는 전통적인 글꼴 (예: Times New Roman)
sans-serif	바 없는 현대적 글꼴 (예: Arial)
monospace	고정폭 글꼴 (예: Courier New)
cursive	필기체 스타일 글꼴
fantasy	장식용 글꼴

 

✅ 공백이 있는 폰트는 따옴표로 감싸기

font-family: "Noto Sans KR", Arial, sans-serif;

 

 

2️⃣ font-size – 글자 크기

글자의 크기를 설정하는 속성입니다.

h1 {
  font-size: 32px;
}

 

단위	설명
px	고정 크기 (픽셀)
em	부모 요소 기준 비율
rem	root(html) 기준 비율
%	부모 요소 대비 백분율

💡 일반적으로 rem 단위가 반응형 디자인에 유리합니다.

 

 

3️⃣ font-weight – 글꼴 두께

텍스트의 굵기를 설정합니다.

p {
  font-weight: bold;
}

또는 숫자 지정도 가능:

p {
  font-weight: 300; /* 얇게 */
}

 

값	의미
normal	보통
bold	굵게
100 ~ 900	수치로 세밀 조절 가능 (100이 가장 얇음)

 

 

4️⃣ font-style – 기울임 설정

기울어진 이탤릭체로 표시할 때 사용합니다.

em {
  font-style: italic;
}

 

값	설명
normal	일반 글꼴
italic	이탤릭체
oblique	강제 기울임 (브라우저 자동 조정)

 

 

5️⃣ font-variant – 글꼴 대체 스타일

소문자를 작은 대문자(small-caps)로 표시할 때 사용합니다.

p {
  font-variant: small-caps;
}

일반적으로 많이 사용되진 않지만, 특정 디자인 포인트로 활용 가능합니다.

 

 

6️⃣ line-height – 줄 간격 (보통 함께 사용)

body {
  font-size: 16px;
  line-height: 1.6;
}

가독성을 높이기 위해 보통 1.4 ~ 1.8 범위로 설정합니다.

 

 

7️⃣ font – 단축 속성

여러 폰트 속성을 한 번에 설정할 수 있는 축약형입니다.

p {
  font: italic bold 16px/1.6 "Noto Sans", sans-serif;
}

 

✅ 작성 순서

font: [font-style] [font-weight] [font-size]/[line-height] [font-family];

 

 

8️⃣ 웹폰트(Web Font) 사용하기

웹에서는 사용자의 컴퓨터에 없는 글꼴도 사용할 수 있습니다.
대표적인 방법은 Google Fonts를 활용하거나 @font-face를 사용하는 것입니다.

✅ 1) Google Fonts 사용

• Google Fonts(https://fonts.google.com)에서 폰트 선택
• <link> 태그로 HTML에 추가

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

• CSS에서 사용

body {
  font-family: 'Roboto', sans-serif;
}

 

✅ 2) @font-face 직접 사용

@font-face {
  font-family: 'MyFont';
  src: url('fonts/myfont.woff2') format('woff2');
}

h1 {
  font-family: 'MyFont', sans-serif;
}

💡 웹폰트는 반드시 라이선스 확인 필요합니다!

 

 

✅ 정리하며…

CSS의 폰트 속성을 잘 활용하면 가독성 높고 세련된 웹 디자인을 완성할 수 있습니다.
특히 font-family, font-size, line-height만 잘 조합해도 훨씬 읽기 좋은 콘텐츠를 만들 수 있어요.
실무에선 Google Fonts와 rem, border-box, 웹폰트 캐싱까지 함께 고려해보면 좋습니다!

 

#CSS폰트 #웹폰트 #font속성 #fontFamily #GoogleFonts #CSS기초 #웹디자인기초 #프론트엔드기초 #웹개발입문 #폰트스타일링