웹 글꼴(Web Fonts)은 사용자의 컴퓨터(로컬 시스템)에 설치되어 있지 않은 글꼴을 웹 페이지에서 사용할 수 있도록 지원하는 CSS 기능입니다. 덕분에 방문자가 특정 글꼴을 갖고 있지 않아도 개발자가 의도한 디자인 그대로 텍스트를 표시할 수 있습니다.
@font-face 규칙이란?
CSS3에서는 @font-face 규칙을 사용해 서버에 저장된 사용자 지정 글꼴 파일을 불러올 수 있습니다. 이 규칙의 핵심 속성은 다음과 같습니다.
- font-family: 불러온 글꼴에 부여할 이름을 정의합니다.
- src: 글꼴 파일의 경로(URL)를 지정합니다.
예제
다음 코드는 @font-face를 활용해 웹 글꼴을 적용하는 기본 예제입니다:
<html>
<head>
<style>
@font-face {
font-family: myFirstFont;
src: url(/css/font/SansationLight.woff);
}
div {
font-family: myFirstFont;
}
</style>
</head>
<body>
<div>This is the example of font face with CSS3.</div>
<p><b>Original Text :</b>This is the example of font face with CSS3.</p>
</body>
</html>
실행 결과
위 예제에서는 SansationLight.woff라는 WOFF 형식의 글꼴 파일을 불러와 myFirstFont라는 이름으로 등록한 뒤, <div> 요소에 적용했습니다. 그 결과 div 영역의 텍스트는 아래 일반 문단의 텍스트와 다른 글꼴로 렌더링되는 것을 확인할 수 있습니다.
참고 사항
WOFF(Web Open Font Format)는 압축률이 높아 웹에서 가장 널리 사용되는 글꼴 형식입니다. 최신 브라우저 대부분이 WOFF와 WOFF2를 지원하며, 구형 브라우저 호환성이 필요하다면 TTF, EOT 등 다른 형식을 함께 제공하는 방법도 고려할 수 있습니다.