안녕하세요, 토스트데브입니다!
오늘은 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기초 #웹디자인기초 #프론트엔드기초 #웹개발입문 #폰트스타일링