CSS 중급 기초

CSS 웹 폰트 사용

CSS 웹 폰트 사용 — 중급

웹 폰트 사용

1. 도입 (왜 배워야 하는가)

웹 폰트는 웹 디자인에서 중요한 요소 중 하나로, 사용자 경험(UX)을 크게 향상시킬 수 있습니다. 다양한 서체를 활용하여 브랜드 아이덴티티를 강화하거나, 가독성을 높일 수 있기 때문입니다. 만약 웹 폰트를 사용하지 않는다면, 기본 제공되는 서체에 의존하게 되어 디자인의 일관성이 떨어질 수 있으며, 방문자가 사이트에 머무르는 시간이 줄어들 수 있습니다. 이는 결과적으로 비즈니스에 부정적인 영향을 미칠 수 있습니다.

2. 핵심 개념 설명

웹 폰트는 웹 페이지에서 사용하기 위해 특정 서버에서 불러오는 폰트 파일을 의미합니다. 이는 다양한 장치와 브라우저에서 일관된 서체 표현을 보장합니다. 예를 들어, 특정 글꼴이 사용자의 컴퓨터에 설치되어 있지 않다면, 기본 글꼴로 대체되어 보일 수 있습니다. 웹 폰트를 사용하면 이러한 문제를 해결할 수 있습니다.

용어	설명
웹 폰트	웹 페이지에서 사용하기 위해 설계된 특정 폰트
@font-face	CSS에서 웹 폰트를 정의하는 규칙
서체 패밀리	비슷한 스타일의 글꼴 그룹

3. 기본 코드 예제

웹 폰트를 사용하기 위해서는 @font-face 규칙을 사용하여 폰트를 정의해야 합니다.

@font-face {
    font-family: 'MyCustomFont'; / 사용자 정의 폰트 이름 /
    src: url('mycustomfont.woff2') format('woff2'), / 폰트 파일 위치 /
         url('mycustomfont.woff') format('woff'); / 추가 포맷 /
}

body {
    font-family: 'MyCustomFont', sans-serif; / 기본 서체 설정 /
}

@font-face 블록은 웹 폰트를 정의합니다.
font-family 속성은 사용자 정의 폰트의 이름을 지정합니다.
src 속성은 웹 폰트 파일의 경로를 지정합니다.
body 선택자 아래의 font-family 속성은 기본 서체를 사용자 정의 폰트로 설정합니다.

실행 결과

위 코드가 적용된 웹 페이지에서는 MyCustomFont라는 폰트가 메인 본문 텍스트에 사용됩니다.

4. 실전 활용 예제

예제 1: 쇼핑몰에서 장바구니 아이콘 디자인

쇼핑몰 웹사이트에서 장바구니 아이콘에 특별한 글꼴을 적용하여 사용자의 시선을 끌 수 있습니다.

@font-face {
    font-family: 'ShoppingFont';
    src: url('shoppingfont.woff2') format('woff2');
}

.cart-icon {
    font-family: 'ShoppingFont'; / 장바구니 아이콘에 폰트 적용 /
    font-size: 24px;
    color: #ff5733; / 장바구니 아이콘 색상 설정 /
}

예제 2: 블로그 헤더 디자인

블로그의 헤더에 특별한 폰트를 적용하여 방문자에게 강한 인상을 남길 수 있습니다.

@font-face {
    font-family: 'BlogHeaderFont';
    src: url('blogheaderfont.ttf') format('truetype');
}

.header-title {
    font-family: 'BlogHeaderFont';
    font-size: 36px;
    color: #333;
}

5. 흔한 실수와 주의사항

실수 1: 폰트 파일 경로 오류

잘못된 경로로 폰트 파일을 지정하면 폰트가 나타나지 않습니다.

잘못된 코드

src: url('wrongpath/mycustomfont.woff2');

올바른 코드

src: url('fonts/mycustomfont.woff2');

실수 2: 포맷 누락

폰트 파일의 포맷을 명시하지 않으면 브라우저가 폰트를 인식하지 못할 수 있습니다.