HTML 중급 도구

HTML 웹 폰트 (Web Fonts)

HTML 웹 폰트 (Web Fonts) — 중급

웹 폰트 (Web Fonts)

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

웹 폰트는 웹 페이지의 디자인과 사용자 경험에 큰 영향을 미칩니다. 사람들이 웹사이트를 방문할 때, 텍스트의 가독성 및 시각적 매력은 그 사이트에 대한 첫 인상을 결정짓는 중요한 요소입니다. 웹 폰트를 사용하지 않으면 기본 시스템 폰트로 표시되어 디자인의 일관성이 떨어지고, 브랜드 이미지에도 부정적인 영향을 미칠 수 있습니다. 예를 들어, 어떤 사이트는 특정한 분위기를 연출하기 위해 독특한 서체를 사용하는데, 이를 구현하지 않으면 브랜드의 아이덴티티가 약해질 수 있습니다.

2. 핵심 개념 설명

웹 폰트는 웹 페이지에 포함된 서체 파일로, 일반적인 시스템에 설치된 폰트 외에도 다양한 서체를 사용할 수 있게 해줍니다. 이를 통해 디자이너는 더욱 창의적이고 독특한 웹사이트를 만들 수 있습니다.

용어	설명
@font-face	웹 폰트를 정의하는 CSS 규칙
WOFF	웹 최적화 폰트 형식
TTF	TrueType Font, 일반적으로 사용되는 폰트 형식
OTF	OpenType Font, 추가 기능을 가진 폰트 형식

3. 기본 코드 예제

웹 폰트를 사용하는 가장 기본적인 방법은 CSS의 @font-face 규칙을 사용하는 것입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>웹 폰트 예제</title>
    <style>
        @font-face {
            font-family: 'MyCustomFont'; / 폰트의 이름 /
            src: url('MyCustomFont.woff2') format('woff2'), / 폰트 파일 경로 /
                 url('MyCustomFont.woff') format('woff');
            font-weight: normal; / 폰트 두께 /
            font-style: normal; / 폰트 스타일 /
        }
        body {
            font-family: 'MyCustomFont', sans-serif; / 기본 폰트 설정 /
        }
    </style>
</head>
<body>
    <h1>안녕하세요, 웹 폰트 예제입니다!</h1>
</body>
</html>

실행 결과:

페이지에 "안녕하세요, 웹 폰트 예제입니다!"라는 문구가 MyCustomFont로 표시됩니다.

코드 한 줄씩 동작 설명:

@font-face { ... }: 웹 폰트를 정의하는 규칙입니다.
font-family: 'MyCustomFont';: 이 폰트의 이름을 설정합니다.
src: url(...);: 폰트 파일의 경로를 설정합니다. 여러 형식을 제공하여 브라우저 호환성을 높입니다.
body { font-family: 'MyCustomFont', sans-serif; }: 본문에 정의한 폰트를 적용하며, 만약 폰트가 로드되지 않으면 기본 sans-serif 폰트를 사용하게 설정합니다.

4. 실전 활용 예제

예제 1: 쇼핑몰에서의 장바구니

장바구니 페이지에서 'MyCustomFont'를 사용하여 상품 이름과 가격을 강조할 수 있습니다.

<h2 style="font-family: 'MyCustomFont';">장바구니</h2>
<ul>
    <li style="font-family: 'MyCustomFont';">상품 A - 10,000원</li>
    <li style="font-family: 'MyCustomFont';">상품 B - 15,000원</li>
</ul>

예제 2: 블로그 포스트의 제목

블로그 제목을 독특한 폰트로 표현하여 읽는 사람의 흥미를 유도할 수 있습니다.

<h1 style="font-family: 'MyCustomFont';">나의 첫 블로그 포스트</h1>
<p>이 블로그에서는 다양한 주제에 대해 이야기합니다.</p>

5. 흔한 실수와 주의사항

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

src: url('MyCustomFont.woff2') format('woff2'); / 잘못된 경로 /

올바른 코드: 경로가 올바른 폰트 파일을 가리켜야 합니다.

실수 2: 폰트 형식 누락

@font-face {
    src: url('MyCustomFont.ttf'); / 형식 명시 없음 /
}

올바른 코드: 형식을 명시해야 호환성 문제가 줄어듭니다.

src: url('MyCustomFont.woff2') format('woff2');

6. 정리

웹 폰트는 웹사이트 디자인에 중요한 요소이며, 사용자 경험을 향상시킵니다.
@font-face를 사용하여 다양한 서체를 웹 페이지에 적용할 수 있습니다.
폰트 파일의 경로와 형식을 제대로 설정하는 것이 중요합니다.

다음에 학습하면 좋은 주제

CSS Flexbox 및 Grid를 사용한 레이아웃 디자인
접근성을 고려한 웹 디자인 기법
CSS 애니메이션 및 전환 효과 활용 방법

학습