웹에서 커스텀 폰트 사용하는 방법

@font-face는 CSS3에서 웹용 글꼴을 직접 삽입할 수 있도록 해주는 기능입니다. 일반적인 운영체제에 포함되지 않은 특수 폰트를 웹사이트에 적용하고 싶을 때, 전통적으로 텍스트를 이미지로 변환하는 방식이 사용되었지만, 이는 접근성, 유지보수성, 검색 엔진 최적화 측면에서 큰 단점이 있습니다. 이러한 문제를 해결하기 위해 JavaScript 또는 Flash를 활용한 기법도 있었지만, 복잡하거나 호환성 문제가 발생했습니다. 이번에는 순수한 CSS의 @font-face 속성을 이용해 어떤 폰트든 웹에서 효과적으로 사용하는 방법을 설명합니다.

@font-face 구문 구조

@font-face {
  font-family: 'customFontName';
  src: url('path/to/font.woff2') format('woff2'),
       url('path/to/font.woff') format('woff'),
       url('path/to/font.ttf') format('truetype'),
       url('path/to/font.eot') format('embedded-opentype'),
       url('path/to/font.svg#fontId') format('svg');
  font-weight: normal;
  font-style: normal;
}

속성 설명

font-family: 사용자 정의 폰트 이름. 이후 font-family 속성에서 참조됩니다.
src: 폰트 파일의 경로와 형식 정보를 포함합니다. 여러 형식을 지원하면 브라우저별 호환성이 높아집니다.
format: 폰트 파일의 형식을 명시하여 브라우저가 적절한 파일을 선택하도록 도와줍니다. 주요 값은 woff, woff2, truetype, embedded-opentype, svg 등입니다.
font-weight, font-style: 폰트의 굵기 및 스타일 설정 (예: bold, italic).

실현 단계

1단계: 다중 형식의 폰트 파일 확보

모든 주요 브라우저에서 일관된 표시를 위해 다음과 같은 파일 형식을 준비해야 합니다:

WOFF2 / WOFF: 최신 브라우저(크롬, 파이어폭스, 사파리 등)에 최적화됨.
TTF (TrueType): 오래된 브라우저나 일부 모바일 환경에서 필요.
EOT (Embedded OpenType): Internet Explorer 8 이하 지원.
SVG: iOS Safari 등 일부 플랫폼에서 필요.

실제로는 보통 .ttf 또는 .otf 파일을 얻은 후, FontSquirrel 또는 Online Font Converter 등의 도구를 통해 다른 형식으로 변환할 수 있습니다.

2단계: 폰트 선언 및 적용

다양한 형식의 폰트 파일을 준비했다면, 스타일시트에 @font-face를 정의합니다.

@font-face {
  font-family: 'myCustomFont';
  src: url('../fonts/myfont.woff2') format('woff2'),
       url('../fonts/myfont.woff') format('woff'),
       url('../fonts/myfont.ttf') format('truetype'),
       url('../fonts/myfont.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}

3단계: 웹 요소에 폰트 적용

정의한 폰트를 실제 요소에 사용합니다.

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

h2 {
  font-family: 'myCustomFont', Arial, serif;
}

p {
  font-size: 16px;
  font-family: 'myCustomFont', Verdana, sans-serif;
}

이렇게 하면 브라우저는 가장 최적의 폰트 형식을 자동으로 선택하여 로드하게 됩니다. 또한, 기본 폰트를 백업으로 두어 폰트 로딩 실패 시에도 가독성이 유지됩니다.

참고 팁

폰트 파일은 압축된 형식(예: WOFF2)을 우선적으로 사용하면 성능이 향상됩니다.
@font-face 정의는 가능한 최상위 위치(예: styles.css)에 배치하고, 중복 정의를 피하세요.
Google Fonts나 Adobe Fonts처럼 외부 서비스를 사용하면 폰트 관리가 간편하지만, 자체 호스팅이 필요한 경우도 있으므로 상황에 맞게 선택하세요.

태그: CSS3 @font-face webfont woff ttf

5월 31일 21:30에 게시됨

괴물 클럽