CSS Web Fonts

CSS Web Fonts: 웹 디자인에서 웹폰트 사용하기

CSS Web Fonts는 웹 페이지에서 텍스트를 더욱 매력적으로 표현하기 위해 사용됩니다. 웹폰트는 서버에서 직접 로드되기 때문에 사용자 컴퓨터에 폰트가 설치되어 있지 않더라도 특정 폰트를 사용할 수 있는 장점이 있습니다. 이 자료에서는 웹폰트를 사용하고 설정하는 방법, 그리고 Google Fonts와 같은 외부 폰트를 CSS에 적용하는 방법을 설명하겠습니다.

1. 웹폰트란?

*웹폰트(Web Font)**는 웹 서버에 호스팅된 폰트 파일을 웹 페이지에서 직접 불러와 사용할 수 있는 폰트입니다. 웹폰트를 사용하면 사용자의 기기에 폰트가 설치되어 있지 않더라도 디자이너가 지정한 폰트가 웹 페이지에 적용됩니다. 이는 웹 사이트의 일관된 디자인을 유지하는 데 큰 도움이 됩니다.

2. CSS에서 웹폰트 사용하기

웹폰트를 사용하기 위해서는 @font-face 규칙을 사용하여 CSS에 폰트를 정의한 다음, 이를 텍스트 요소에 적용할 수 있습니다. 또한 Google Fonts와 같은 외부 서비스를 사용하면 간편하게 웹폰트를 적용할 수 있습니다.

1) @font-face 규칙

@font-face는 특정 폰트 파일을 웹 페이지에서 사용 가능하게 만드는 CSS 규칙입니다.

기본 구문

@font-face {
  font-family: 'MyCustomFont';
  src: url('fonts/my-custom-font.woff2') format('woff2'),
       url('fonts/my-custom-font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

font-family: 사용할 폰트의 이름을 지정합니다.
src: 폰트 파일의 경로와 형식을 지정합니다. 여러 형식을 나열할 수 있습니다.
font-weight: 폰트의 굵기를 지정합니다(예: normal, bold).
font-style: 폰트의 스타일을 지정합니다(예: normal, italic).

예시: @font-face로 웹폰트 적용

@font-face {
  font-family: 'OpenSans';
  src: url('fonts/OpenSans-Regular.woff2') format('woff2'),
       url('fonts/OpenSans-Regular.woff') format('woff');
}

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

위 코드는 OpenSans 폰트를 사용하며, 사용자 컴퓨터에 폰트가 없더라도 웹페이지에서 사용할 수 있습니다.

2) 웹폰트 파일 형식

웹폰트 파일 형식은 여러 가지가 있으며, 각 형식은 브라우저 호환성에 영향을 미칩니다. 주로 사용하는 형식은 다음과 같습니다:

WOFF (Web Open Font Format): 웹용으로 최적화된 폰트 형식.
WOFF2: WOFF의 개선된 버전으로, 더 높은 압축률을 제공합니다.
TTF (TrueType Font): 널리 사용되는 폰트 형식 중 하나.
EOT (Embedded OpenType): 주로 구형 버전의 Internet Explorer에서 사용.
SVG: 벡터 그래픽 형식의 폰트로, 일부 구형 모바일 브라우저에서 사용.

3. Google Fonts 사용하기

Google Fonts는 무료로 제공되는 웹폰트 라이브러리로, 수많은 폰트를 쉽게 사용할 수 있습니다. Google Fonts를 사용하면 외부 파일을 따로 다운로드하지 않고, 제공된 링크를 통해 웹폰트를 사용할 수 있습니다.

Google Fonts 사용법

Google Fonts 웹사이트에서 원하는 폰트를 선택합니다.
선택한 폰트의 link 태그를 복사해 HTML 파일의 <head> 부분에 삽입합니다.
CSS에서 선택한 폰트를 font-family 속성으로 적용합니다.

예시: Google Fonts 사용하기

<!-- HTML에서 Google Fonts 링크 추가 -->
<link href="<https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap>" rel="stylesheet">

<!-- CSS에서 폰트 적용 -->
body {
  font-family: 'Roboto', sans-serif;
}

위 코드는 Roboto 폰트를 Google Fonts에서 불러와 웹 페이지에 적용합니다. 400(기본 굵기)과 700(굵은 글씨체)을 사용할 수 있으며, sans-serif는 폴백 폰트로 설정됩니다.

Google Fonts 옵션

Google Fonts에서는 다양한 굵기와 스타일을 선택할 수 있습니다. 예를 들어, 굵기와 기울임꼴 옵션을 설정할 수 있습니다.

body {
  font-family: 'Roboto', sans-serif;
  font-weight: 700; /* 굵은 글씨 */
  font-style: italic; /* 기울임꼴 */
}

이 코드는 Roboto 폰트를 사용하면서 굵게(700) 설정하고, 텍스트를 기울임꼴로 적용합니다.

4. 웹폰트 성능 최적화

웹폰트는 페이지 로딩 속도에 영향을 미칠 수 있으므로, 성능을 최적화하는 것이 중요합니다. 몇 가지 방법을 통해 웹폰트를 최적화할 수 있습니다.

1) 폰트 파일의 형식 최적화

WOFF2 형식을 우선적으로 사용하세요. 이는 다른 형식보다 압축률이 높고 성능이 좋습니다.
필요한 폰트 스타일과 굵기만 로드하여 불필요한 데이터 전송을 줄입니다.

2) 폰트 표시 속성 설정

font-display 속성을 사용하면 폰트 로딩 시 대체 폰트가 어떻게 표시될지 설정할 수 있습니다. 주로 swap 옵션이 많이 사용됩니다.

@font-face {
  font-family: 'OpenSans';
  src: url('fonts/OpenSans-Regular.woff2') format('woff2');
  font-display: swap;
}

swap: 웹폰트가 로드되기 전에 대체 폰트를 사용하고, 로드된 후 즉시 웹폰트로 변경합니다.

3) 폰트 서브셋 사용

웹폰트 파일의 크기를 줄이기 위해 **서브셋(subset)**을 사용할 수 있습니다. 서브셋은 특정 언어 또는 문자에 필요한 글리프만 포함한 폰트 파일을 말합니다. 예를 들어, 한글 웹사이트에서는 한글 글리프만 포함된 서브셋을 사용할 수 있습니다.

5. 웹폰트 적용 예시

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web Fonts Example</title>
  <!-- Google Fonts 링크 추가 -->
  <link href="<https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap>" rel="stylesheet">
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      line-height: 1.6;
    }

    h1 {
      font-weight: 700;
    }

    p {
      font-weight: 400;
    }
  </style>
</head>
<body>
  <h1>웹폰트를 활용한 텍스트</h1>
  <p>이 페이지는 Google Fonts에서 제공하는 Roboto 폰트를 사용하여 텍스트를 표시합니다.</p>
</body>
</html>

이 예시에서는 Google Fonts에서 제공하는 Roboto 폰트를 적용했으며, 텍스트가 웹폰트를 통해 더욱 깔끔하게 표시됩니다.

CSS Web Fonts의 기본 개념과 @font-face 규칙, Google Fonts 사용 방법, 그리고 웹폰트 성능 최적화 방법을 설명합니다. 웹폰트를 사용하면 일관성 있는 폰트 스타일을 유지하면서도 다양한 디바이스에서 동일한 텍스트 스타일을 구현할 수 있습니다.

코딩 스쿨 CSS